craftdot

craftdot is a wapper of graphviz to get pretty diagram for your architecture/services diagrams.

Usage no npm install needed!

<script type="module">
  import craftdot from 'https://cdn.skypack.dev/craftdot';
</script>

README

Craftdot

Get pretty diagram for your architecture/services with an easy way.

Features

  • nest group
  • custom attributes with list or key/vaule
  • include from file
  • custom style
  • support wildcards *

Install

$ npm install craftdot

Usage

Render crafdot file and open it on browser by default.

$ craftdot example/example.craftdot
rebuilding...
server listening on http://127.0.0.1:3200

Example

Comment

// this is a comment

Node

single node

node1
image

node with attributes

the attributes is compatible with Graphviz, so you can use any attribute exist in Graphviz.

node1[fillcolor: skyblue, style:filled]
image

node with details

list {
    hosts:
        - 172.16.1.4
        - 172.16.1.5
}

key-vaule {
    domain: "https://service.localdomain"
}

both {
    hosts:
        - 172.16.1.10
        - 172.16.1.11
    domain: "https://service.localdomain"
}

with-attributes [fillcolor: skyblue, style:filled]{
    domain: "https://service.localdomain"
}
image

apply attributes to mutiple nodes with wildcrads *

node1
node2
other

node*[fillcolor: skyblue, style:filled]
image

group

one group must contain at least one node or one group.

group cluster1 {
    node1
    node2
}
image

nest groups

group cluster1 {
    node1
    node2
    group sub-cluster1 {
        node1
        node2
    }
}
image

edge

node1
node2
node1 -> node2
image

mutiple edge in one line

node1
node2
node3

node1 -> node2,node3
image

edge with attributes

same as node, the attributes is compatible with Graphviz, so you can use any attribute exist in Graphviz.

node1
node2

node1 -> node2 [label: "hi", color: "red"]
image

apply attributes to mutiple edges with wildcrads *

node1
node2
node3
db

node1,node2,node3 -> db
* -> db [color: red]
image

include

// node.craftdot
node1
node2

// edge.craftdot
node1 -> node2

// include.craftdot
include {"node.craftdot"}
include {"edge.craftdot"}
image