Programming

Node classes list for the Programming provider.

Example Usage

import { Diagram } from "diagrams-js";
import { Action, Collate, Database } from "diagrams-js/programming/flowchart";
import { Angular, Backbone, Camel } from "diagrams-js/programming/framework";

const diagram = Diagram("Programming Architecture", { direction: "TB" });

const node1 = diagram.add(Action("Node 1"));
const node2 = diagram.add(Angular("Node 2"));

node1.to(node2);

const svg = await diagram.render();
diagram.destroy();

note

All node classes available in the Python diagrams library are also available in diagrams-js with the same class names and structure.

Node Reference

programming/flowchart

Action

import { Action } from "diagrams-js/programming/flowchart";

Collate

import { Collate } from "diagrams-js/programming/flowchart";

Database

import { Database } from "diagrams-js/programming/flowchart";

Decision

import { Decision } from "diagrams-js/programming/flowchart";

Delay

import { Delay } from "diagrams-js/programming/flowchart";

Display

import { Display } from "diagrams-js/programming/flowchart";

Document

import { Document } from "diagrams-js/programming/flowchart";

InputOutput

import { InputOutput } from "diagrams-js/programming/flowchart";

Inspection

import { Inspection } from "diagrams-js/programming/flowchart";

InternalStorage

import { InternalStorage } from "diagrams-js/programming/flowchart";

LoopLimit

import { LoopLimit } from "diagrams-js/programming/flowchart";

ManualInput

import { ManualInput } from "diagrams-js/programming/flowchart";

ManualLoop

import { ManualLoop } from "diagrams-js/programming/flowchart";

Merge

import { Merge } from "diagrams-js/programming/flowchart";

MultipleDocuments

import { MultipleDocuments } from "diagrams-js/programming/flowchart";

OffPageConnectorLeft

import { OffPageConnectorLeft } from "diagrams-js/programming/flowchart";

OffPageConnectorRight

import { OffPageConnectorRight } from "diagrams-js/programming/flowchart";

Or

import { Or } from "diagrams-js/programming/flowchart";

PredefinedProcess

import { PredefinedProcess } from "diagrams-js/programming/flowchart";

Preparation

import { Preparation } from "diagrams-js/programming/flowchart";

Sort

import { Sort } from "diagrams-js/programming/flowchart";

StartEnd

import { StartEnd } from "diagrams-js/programming/flowchart";

StoredData

import { StoredData } from "diagrams-js/programming/flowchart";

SummingJunction

import { SummingJunction } from "diagrams-js/programming/flowchart";

programming/framework

Angular

import { Angular } from "diagrams-js/programming/framework";

Backbone

import { Backbone } from "diagrams-js/programming/framework";

Camel

import { Camel } from "diagrams-js/programming/framework";

Django

import { Django } from "diagrams-js/programming/framework";

Dotnet

import { Dotnet } from "diagrams-js/programming/framework";

Ember

import { Ember } from "diagrams-js/programming/framework";

Fastapi

import { Fastapi } from "diagrams-js/programming/framework";

Flask

import { Flask } from "diagrams-js/programming/framework";

Flutter

import { Flutter } from "diagrams-js/programming/framework";

Graphql

import { Graphql } from "diagrams-js/programming/framework";

Hibernate

import { Hibernate } from "diagrams-js/programming/framework";

Jhipster

import { Jhipster } from "diagrams-js/programming/framework";

Laravel

import { Laravel } from "diagrams-js/programming/framework";

Micronaut

import { Micronaut } from "diagrams-js/programming/framework";

Nextjs

import { Nextjs } from "diagrams-js/programming/framework";

Phoenix

import { Phoenix } from "diagrams-js/programming/framework";

Quarkus

import { Quarkus } from "diagrams-js/programming/framework";

Rails

import { Rails } from "diagrams-js/programming/framework";

React

import { React } from "diagrams-js/programming/framework";

Spring

import { Spring } from "diagrams-js/programming/framework";

Sqlpage

import { Sqlpage } from "diagrams-js/programming/framework";

Starlette

import { Starlette } from "diagrams-js/programming/framework";

Svelte

import { Svelte } from "diagrams-js/programming/framework";

Vercel

import { Vercel } from "diagrams-js/programming/framework";

Vue

import { Vue } from "diagrams-js/programming/framework";

programming/language

Bash

import { Bash } from "diagrams-js/programming/language";

C

import { C } from "diagrams-js/programming/language";

Cpp

import { Cpp } from "diagrams-js/programming/language";

Csharp

import { Csharp } from "diagrams-js/programming/language";

Dart

import { Dart } from "diagrams-js/programming/language";

Elixir

import { Elixir } from "diagrams-js/programming/language";

Erlang

import { Erlang } from "diagrams-js/programming/language";

Go

import { Go } from "diagrams-js/programming/language";

Java

import { Java } from "diagrams-js/programming/language";

Javascript

import { Javascript } from "diagrams-js/programming/language";

Kotlin

import { Kotlin } from "diagrams-js/programming/language";

Latex

import { Latex } from "diagrams-js/programming/language";

Matlab

import { Matlab } from "diagrams-js/programming/language";

Nodejs

import { Nodejs } from "diagrams-js/programming/language";

Php

import { Php } from "diagrams-js/programming/language";

Python

import { Python } from "diagrams-js/programming/language";

R

import { R } from "diagrams-js/programming/language";

Ruby

import { Ruby } from "diagrams-js/programming/language";

Rust

import { Rust } from "diagrams-js/programming/language";

Scala

import { Scala } from "diagrams-js/programming/language";

Sql

import { Sql } from "diagrams-js/programming/language";

Swift

import { Swift } from "diagrams-js/programming/language";

Typescript

import { Typescript } from "diagrams-js/programming/language";

programming/runtime

Dapr

import { Dapr } from "diagrams-js/programming/runtime";