Programming

Node types 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();

note

All node types 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"