Skip to main content

DOT Diagram

Experiment syntax may change.

Introduction​

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

It can be used to describe a simple general graph.

Limitations​

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

Syntax​

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.

dotDiagram
  %% pintora style comment
  %% here we declare a directed graph
  digraph G {
    // specify graph attributes
    bgcolor="white"

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

    subgraph S1 {
      // subgraph will inherit parent attributes
      label="Sub";
      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"]

dotDiagram
  digraph {
    bgcolor="#faf5f5";

    core["@pintora/core"];
    diagrams["@pintora/diagrams"];
    standalone["@pintora/standalone"];

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

Attributes​

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

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

// https://graphviz.org/doc/info/attrs.html
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
}

Shapes​

Node Shapes​

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

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

Arrow Shapes​

dotDiagram
  digraph {
    bgcolor="#faf5f5";
    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​

dotDiagram
  @param ranksep 30
  digraph {
    bgcolor="#faf5f5";
    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.

dotDiagram
  @param ranksep 30
  @param edgeType curved
  digraph G {
    bgcolor="#faf5f5"
    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 {
      label="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"]
  }