Skip to main content

DOT Diagram

Experiment syntax may change.


This is a subset of Graphviz's DOT Language and visualization.

It can be used to describe a simple general graph.


Graphviz is a versatile and wonderful visualization library, dotDiagram only covers a small part of its functionality.

  • as the name implies, only dot layout is supported, and layout result is not the same as graphviz
  • ports are not supported
  • many attributes can be parsed but not supported, they do not affect the result


Compatible with Graphviz

The keywords node, edge, graph, digraph and subgraph.

A graph must be specified as either a digraph or a graph, they stand for directed and undirected graph. A digraph must specify an edge using the edge operator -> while an undirected graph must use --.

You can also specify attributes inside [key=val] square brackets.

The subgraph inherit the attribute settings of its parent graph at the time of its definition.

  %% pintora style comment
  %% here we declare a directed graph
  digraph G {
    // specify graph attributes

    // specify common node attributes
    node [color="#111",bgcolor=orange]

    subgraph S1 {
      // subgraph will inherit parent attributes
      a1 [fontcolor="purple",margint=10];

    /* usually we put edges at the last */
    a1 -> b1;
    n1 -> end [color="blue"];
    a2 -> end;

Node shorthand

name["label"] as a shorthand of name[label="label"]

  digraph {


    diagrams -> core;
    standalone -> core;
    standalone -> diagrams;


Here are some supported attributes on node, edge, and graph.

export type DOTShapeType = 'box' | 'ellipse' | 'circle' | 'diamond' | 'plaintext'

export type NodeAttrs = {
label?: string
/** stroke color */
color?: string
/** label text color */
fontcolor?: string
/** background color */
bgcolor?: string
/** font family for node label */
fontname?: string
/** font size for node label */
fontsize?: number
/** shape of node */
shape?: DOTShapeType
/** [pintora specific], margin top */
margint?: number
/** [pintora specific], margin bottom */
margintb?: number
/** [pintora specific], margin left */
marginl?: number
/** [pintora specific], margin right */
marginr?: number

export type EdgeStyle = 'invis'

export type DOTArrowType = 'normal' | 'box' | 'obox' | 'dot' | 'odot' | 'open' | 'diamond' | 'ediamond'

export type EdgeAttrs = {
label?: string
/** edge line color */
color?: string
/** edge label text color */
fontcolor?: string
/** edge style */
style?: EdgeStyle
/** edge line width */
penwidth?: number
/** font family for edge label */
fontname?: string
/** font size for edge label */
fontsize?: number
/** arrow type for arrow head */
arrowhead?: DOTArrowType

export type GraphAttrs = {
label?: string
/** stroke color */
color?: string
/** background color */
bgcolor?: string
/** font family for graph label */
fontname?: string
/** font size for graph label */
fontsize?: number


Node Shapes

  @param fontWeight bold
  digraph {
    node [color="#111",bgcolor=orange]

    ellipse [shape="ellipse"];
    circle [shape="circle"];
    diamond [shape="diamond"];
    plaintext [shape="plaintext"];

Arrow Shapes

  digraph {
    node [color="#111",bgcolor=orange]

    s1 -> e1 [arrowhead="box"]
    s2 -> e2 [arrowhead="obox"]
    s3 -> e3 [arrowhead="dot"]
    s4 -> e4 [arrowhead="odot"]
    s5 -> e5 [arrowhead="open"]
    s6 -> e6 [arrowhead="diamond"]
    s7 -> e7 [arrowhead="ediamond"]

Node and Edge Style

  @param ranksep 30
  digraph {
    node [color="#111",bgcolor=orange]

    s1 [style="solid"]
    s2 [style="dashed"]
    s3 [style="dotted"]
    s4 [style="bold"]

    s1 -> e1 [style="solid"]
    s2 -> e2 [style="dashed"]
    s3 -> e3 [style="dotted"]
    s4 -> e4 [style="bold"]
    s5 -> e5 [style="invis"]

Override config

You can override diagram config through @param directive.

All available configs can be seen in the Config page.

  @param ranksep 30
  @param edgeType curved
  digraph G {
    node [bgcolor="orange"]
    label="package dependencies"

    standalone [label="@pintora/standalone"]
    core [label="@pintora/core"]
    renderer [label="@pintora/renderer"]
    diagrams [label="@pintora/diagrams"]
    cli [label="@pintora/cli"]
    dev-kit [label="@pintora/development-kit"]
    test-shared [label="@pintora/test-shared"]

    subgraph external {

      dagre-layout [label="@pintora/dagre"]
      graphlib [label="@pintora/graphlib"]

      dagre-layout -> graphlib

    cli -> standalone
    standalone -> diagrams
    standalone -> renderer

    diagrams -> core
    diagrams -> dagre-layout
    renderer -> core

    diagrams -> dev-kit [style="dashed"]
    diagrams -> test-shared [style="dashed"]
    cli -> test-shared [style="dashed"]
    standalone -> test-shared [style="dashed"]