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"]
  }

Override config

You can override diagram config through @param directive.

All available configs can be seen in the Config page.

dotDiagram
@param edgeType curved
@param ranksep 50
@param nodesep 30

digraph mygraph {
  "//absl/random:random"
  "//absl/random:random" -> "//absl/random:distributions"
  "//absl/random:random" -> "//absl/random:seed_sequences"
  "//absl/random:random" -> "//absl/random/internal:pool_urbg"
  "//absl/random:random" -> "//absl/random/internal:nonsecure_base"
  "//absl/random:distributions"
  "//absl/random:distributions" -> "//absl/strings:strings"
  "//absl/random:seed_sequences"
  "//absl/random:seed_sequences" -> "//absl/random/internal:seed_material"
  "//absl/random:seed_sequences" -> "//absl/random/internal:salted_seed_seq"
  "//absl/random:seed_sequences" -> "//absl/random/internal:pool_urbg"
  "//absl/random:seed_sequences" -> "//absl/random/internal:nonsecure_base"
  "//absl/random/internal:nonsecure_base"
  "//absl/random/internal:nonsecure_base" -> "//absl/random/internal:pool_urbg"
  "//absl/random/internal:nonsecure_base" -> "//absl/random/internal:salted_seed_seq"
  "//absl/random/internal:nonsecure_base" -> "//absl/random/internal:seed_material"
  "//absl/random/internal:pool_urbg"
  "//absl/random/internal:pool_urbg" -> "//absl/random/internal:seed_material"
  "//absl/random/internal:salted_seed_seq"
  "//absl/random/internal:salted_seed_seq" -> "//absl/random/internal:seed_material"
  "//absl/random/internal:seed_material"
  "//absl/random/internal:seed_material" -> "//absl/strings:strings"
  "//absl/strings:strings"
}