Thanks to visit codestin.com
Credit goes to github.com

Skip to content

An unofficial interface for building D2 diagram files in javascript.

Notifications You must be signed in to change notification settings

Kreshnik/d2lang-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d2lang-js

Banner

An unofficial interface for building D2 diagram files in javascript.

Installation

npm install d2lang-js

Usage

import d2 from "d2lang-js";

const umbrella = new d2.D2Shape(
    "alphabet",
    "Alphabet Inc",
    d2.Shape.rectangle
)
const company = new d2.D2Shape(
    "google",
    "Google",
    d2.Shape.rectangle
)
company.addShape(new d2.D2Shape("gmail", "Gmail", d2.Shape.rectangle));
company.addShape(new d2.D2Shape("meet", "Meet", d2.Shape.rectangle));
company.addShape(new d2.D2Shape("deepmind", "DeepMind", d2.Shape.rectangle));

const connection = new d2.D2Connection(company.name, umbrella.name, "BELONGS_TO", d2.Direction.TO);

const diagram = new d2.D2Diagram([umbrella, company],[connection]);
console.log(diagram.toString());

D2 Output

alphabet: Alphabet Inc {
  shape: rectangle
}
google: Google {
  gmail: Gmail {
    shape: rectangle
  }
  meet: Meet {
    shape: rectangle
  }
  deepmind: Deepmind {
    shape: rectangle
  }
  shape: rectangle
}
alphabet -> google

Online compiler

D2 Playground

Result of output above

Demo

Supported

  • Shapes (nodes)
  • Connections (links)
  • Styles
  • Containers (nodes/links in nodes)
  • Shapes in shapes
  • Arrow directions
  • Markdown / latex / block strings / code in shapes
  • Icons in shapes
  • SQL table shapes
  • Class shapes
  • Comments

Inspiration

py-d2

About

An unofficial interface for building D2 diagram files in javascript.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published