Convert Figma logo to code with AI

terrastruct logod2

D2 is a modern diagram scripting language that turns text to diagrams.

16,489
412
16,489
435
View on GitHub

Top Related Projects

mermaid-js's avatar

mermaid

70,568

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

plantuml's avatar

plantuml

10,277

Generate diagrams from textual description

jgraph's avatar

drawio

40,552

draw.io is a JavaScript, client-side editor for general diagramming.

yuzutech's avatar

kroki

2,857

Creates diagrams from textual descriptions!

excalidraw's avatar

excalidraw

80,700

Virtual whiteboard for sketching hand-drawn like diagrams

Quick Overview

D2 is a modern diagram scripting language that turns text to diagrams. It aims to be faster and easier to use than traditional diagram tools, allowing users to create diagrams using a simple, intuitive syntax. D2 can generate various types of diagrams, including flowcharts, sequence diagrams, and entity-relationship diagrams.

Pros

  • Simple and intuitive syntax for creating diagrams
  • Supports a wide range of diagram types
  • Version control friendly, as diagrams are defined in plain text
  • Offers both CLI and web-based playground for diagram creation

Cons

  • Learning curve for users unfamiliar with text-based diagramming
  • Limited customization options compared to some graphical diagram tools
  • Requires installation of additional software for local use
  • May not be suitable for highly complex or specialized diagrams

Code Examples

  1. Creating a simple flowchart:
start: Start
process: Process data
decision: Make decision
end: End

start -> process
process -> decision
decision -> end: Yes
decision -> process: No
  1. Defining a sequence diagram:
alice -> bob: Hello
bob -> charlie: Hi
charlie -> alice: Greetings
  1. Creating an entity-relationship diagram:
User {
  shape: sql_table
  id: int
  username: varchar
  email: varchar
}

Post {
  shape: sql_table
  id: int
  title: varchar
  content: text
  user_id: int
}

User.id -> Post.user_id

Getting Started

  1. Install D2:

    curl -fsSL https://d2lang.com/install.sh | sh -s --

  2. Create a new file with a .d2 extension (e.g., diagram.d2).

  3. Write your diagram script in the file.

  4. Generate the diagram:

    d2 diagram.d2 output.png

  5. View the generated diagram in your preferred image viewer.

Competitor Comparisons

mermaid-js logo

mermaid

70,568

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Pros of Mermaid

  • Wider adoption and community support
  • Extensive documentation and examples
  • Supports a broader range of diagram types

Cons of Mermaid

  • Steeper learning curve for complex diagrams
  • Limited customization options for diagram styling

Code Comparison

Mermaid:

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    B -->|No| D[End]

D2:

direction: right
x -> y -> z
a -> b -> c

Key Differences

  • Syntax: Mermaid uses a more verbose syntax, while D2 opts for a simpler, more concise approach
  • Rendering: Mermaid is primarily JavaScript-based, whereas D2 is a standalone binary
  • Use cases: Mermaid excels in web-based environments, while D2 is more versatile for various platforms

Conclusion

Both Mermaid and D2 offer powerful diagramming capabilities. Mermaid's extensive features and community support make it ideal for web-based projects, while D2's simplicity and platform independence cater to users seeking a lightweight, versatile solution. The choice between the two depends on specific project requirements and personal preferences.

plantuml logo

plantuml

10,277

Generate diagrams from textual description

Pros of PlantUML

  • Extensive diagram types supported (sequence, class, use case, etc.)
  • Large community and ecosystem with numerous integrations
  • Text-based syntax allows for version control and easy sharing

Cons of PlantUML

  • Steeper learning curve for complex diagrams
  • Limited customization options for diagram aesthetics
  • Can be slower to render, especially for large diagrams

Code Comparison

PlantUML:

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi there
@enduml

D2:

Alice -> Bob: Hello
Bob -> Alice: Hi there

D2 offers a more straightforward syntax for simple diagrams, while PlantUML requires specific start and end tags. Both tools allow for easy creation of basic sequence diagrams, but PlantUML's syntax may be more verbose for complex scenarios.

PlantUML excels in its wide range of diagram types and established ecosystem, making it suitable for diverse diagramming needs. D2, being newer, focuses on simplicity and modern design principles, potentially offering a more intuitive experience for users who prioritize ease of use and aesthetics over extensive features.

jgraph logo

drawio

40,552

draw.io is a JavaScript, client-side editor for general diagramming.

Pros of draw.io

  • Rich graphical user interface for easy diagram creation
  • Extensive library of pre-built shapes and icons
  • Collaborative features for real-time editing

Cons of draw.io

  • Steeper learning curve for complex diagrams
  • Limited text-based diagram creation options
  • Requires a web browser or desktop application to use

Code Comparison

draw.io uses XML-based format for diagram representation:

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Start" style="rounded=1;" vertex="1" parent="1">
      <mxGeometry x="120" y="120" width="80" height="40" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

D2 uses a simple text-based format for diagram creation:

shape: {
  style: {
    stroke: black
    fill: white
  }
}
Start -> End

D2 offers a more straightforward approach to diagram creation using text, while draw.io provides a comprehensive graphical interface with more advanced features. D2 is better suited for quick, code-like diagram creation, whereas draw.io excels in creating visually rich and complex diagrams with its extensive shape library and collaborative features.

yuzutech logo

kroki

2,857

Creates diagrams from textual descriptions!

Pros of Kroki

  • Supports a wide variety of diagram types and markup languages
  • Offers a unified API for multiple diagramming tools
  • Provides both self-hosted and cloud-based options

Cons of Kroki

  • Requires external dependencies for each supported diagram type
  • May have a steeper learning curve due to multiple syntax options
  • Potentially higher resource usage when running all supported tools

Code Comparison

Kroki (PlantUML syntax):

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi there
@enduml

D2:

Alice -> Bob: Hello
Bob -> Alice: Hi there

Key Differences

  • D2 uses its own custom syntax, while Kroki supports multiple existing syntaxes
  • D2 is a single, standalone tool, whereas Kroki integrates multiple diagramming tools
  • D2 focuses on simplicity and performance, while Kroki prioritizes versatility and compatibility

Both projects aim to simplify the process of creating diagrams from text, but they take different approaches. D2 offers a streamlined experience with its own syntax, while Kroki provides a broader range of options by integrating existing tools.

excalidraw logo

excalidraw

80,700

Virtual whiteboard for sketching hand-drawn like diagrams

Pros of Excalidraw

  • User-friendly interface with a focus on hand-drawn aesthetics
  • Collaborative real-time editing capabilities
  • Extensive library of pre-made shapes and elements

Cons of Excalidraw

  • Limited support for complex diagrams and flowcharts
  • Less suitable for programmatic diagram generation
  • Fewer options for customizing diagram styles and layouts

Code Comparison

Excalidraw (JavaScript):

const element = createElement({
  type: "rectangle",
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  backgroundColor: "lightblue",
});

D2 (D2 language):

shape: {
  rectangle: {
    x: 100
    y: 100
    width: 200
    height: 100
    style: {
      fill: lightblue
    }
  }
}

Both repositories offer diagramming solutions, but they cater to different use cases. Excalidraw provides a more intuitive, collaborative drawing experience with a hand-drawn style, making it ideal for quick sketches and brainstorming sessions. D2, on the other hand, offers a text-based approach to diagram creation, which is better suited for version control and programmatic generation of complex diagrams. The choice between the two depends on the specific needs of the project and the preferred workflow of the users.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Table of Contents

What does D2 look like?

vars: {
  d2-config: {
    layout-engine: elk
    # Terminal theme code
    theme-id: 300
  }
}
network: {
  cell tower: {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    transmitter

    satellites -> transmitter: send
    satellites -> transmitter: send
    satellites -> transmitter: send
  }

  online portal: {
    ui: {shape: hexagon}
  }

  data processor: {
    storage: {
      shape: cylinder
      style.multiple: true
    }
  }

  cell tower.transmitter -> data processor.storage: phone logs
}

user: {
  shape: person
  width: 130
}

user -> network.cell tower: make call
user -> network.online portal.ui: access {
  style.stroke-dash: 3
}

api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}

network.data processor -> api server

D2 render example

Open in playground

For more examples, see ./docs/examples.

Quickstart

The most convenient way to use D2 is to just run it as a CLI executable to produce SVGs from .d2 files.

# First, install D2
curl -fsSL https://d2lang.com/install.sh | sh -s --

echo 'x -> y -> z' > in.d2
d2 --watch in.d2 out.svg

A browser window will open with out.svg and live-reload on changes to in.d2.

Install

The easiest way to install is with our install script:

curl -fsSL https://d2lang.com/install.sh | sh -s --

You can run the install script with --dry-run to see the commands that will be used to install without executing them.

Or if you have Go installed you can install from source though you won't get the manpage:

go install oss.terrastruct.com/d2@latest

You can also install a release from source which will include manpages. See ./docs/INSTALL.md#source-release.

To uninstall with the install script:

curl -fsSL https://d2lang.com/install.sh | sh -s -- --uninstall

For detailed installation docs, see ./docs/INSTALL.md. We demonstrate alternative methods and examples for each OS.

As well, the functioning of the install script is described in detail to alleviate any concern of its use. We recommend using your OS's package manager directly instead for improved security but the install script is by no means insecure.

D2 as a library

In addition to being a runnable CLI tool, D2 can also be used to produce diagrams from Go programs.

For examples, see ./docs/examples/lib. This blog post also demos a complete, runnable example of using D2 as a library for a real-world use case.

Themes

D2 includes a variety of official themes to style your diagrams beautifully right out of the box. See ./d2themes to browse the available themes and make or contribute your own creation.

Fonts

D2 ships with "Source Sans Pro" as the font in renders. If you wish to use a different one, please see ./d2renderers/d2fonts.

Export file types

D2 currently supports SVG, PNG and PDF exports. More coming soon.

Language tooling

D2 is designed with language tooling in mind. D2's parser can parse multiple errors from a broken program, has an autoformatter, syntax highlighting, and we have plans for LSP's and more. Good language tooling is necessary for creating and maintaining large diagrams.

The extensions for VSCode and Vim can be found in the Related section.

Plugins

D2 is designed to be extensible and composable. The plugin system allows you to change out layout engines and customize the rendering pipeline. Plugins can either be bundled with the build or separately installed as a standalone binary.

Layout engines:

  • dagre (default, bundled): A fast, directed graph layout engine that produces layered/hierarchical layouts. Based on Graphviz's DOT algorithm.
  • ELK (bundled): A directed graph layout engine particularly suited for node-link diagrams with an inherent direction and ports.
  • TALA (binary): Novel layout engine designed specifically for software architecture diagrams. Requires separate install, visit the Github page for more.

D2 intends to integrate with a variety of layout engines, e.g. dot, as well as single-purpose layout types like sequence diagrams. You can choose whichever layout engine you like and works best for the diagram you're making.

Comparison

For a comparison against other popular text-to-diagram tools, see https://text-to-diagram.com.

Contributing

Contributions are welcome! See ./docs/CONTRIBUTING.md.

License

Open sourced under the Mozilla Public License 2.0. See ./LICENSE.txt.

Related

We are constantly working on new plugins, integrations, extensions. Contributions are welcome in any official or community plugins. If you have somewhere in your workflow that you want to use D2, feel free to open a discussion. We have limited bandwidth and usually choose the most high-demand ones to work on. If you make something cool with D2 yourself, let us know and we'll be happy to include it here!

Official plugins

Community plugins

Misc

FAQ

  • Does D2 collect telemetry?
    • No, D2 does not use an internet connection after installation, except to check for version updates from Github periodically.
  • Does D2 need a browser to run?
    • No, D2 can run entirely server-side.
  • What's coming in the next release?
  • I have a question or need help.
    • The best way to get help is to ask on D2 Discord
  • I have a feature request, proposal, or bug report.
    • Please open up a Github Issue.
  • I have a private inquiry.

Notable open-source projects documenting with D2

Do you have or see an open-source project with .d2 files? Please submit a PR adding to this selected list of featured projects using D2.