Skip to content

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