d2lang-js

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

Supported

• <input checked="" disabled="" type="checkbox"> Shapes (nodes)
• <input checked="" disabled="" type="checkbox"> Connections (links)
• <input checked="" disabled="" type="checkbox"> Styles
• <input checked="" disabled="" type="checkbox"> Containers (nodes/links in nodes)
• <input checked="" disabled="" type="checkbox"> Shapes in shapes
• <input checked="" disabled="" type="checkbox"> Arrow directions
• <input checked="" disabled="" type="checkbox"> Markdown / latex / block strings / code in shapes
• <input checked="" disabled="" type="checkbox"> Icons in shapes
• <input disabled="" type="checkbox"> SQL table shapes
• <input disabled="" type="checkbox"> Class shapes
• <input disabled="" type="checkbox"> Comments

Inspiration

py-d2