Jekyll Diagrams

Jekyll Diagrams is a jekyll plugins for creating amazing diagrams, including:

• Graphviz
• Blockdiag, Seqdiag, Actdiag and Nwdiag

Installation

When using bundler

Add these lines to your application's Gemfile file:

group :jekyll_plugins do
  gem 'jekyll-diagrams'
end

And then execute:

$ bundle

Or installing manually

$ gem install jekyll-diagrams

And then add this line to your application's _config.yml file:

plugins:
  - jekyll-diagrams

Usage

Graphviz

You need first install graphviz with package manager on your system. e.g.

• Gentoo Linux : emerge graphviz
• Arch Linux : pacman -S graphviz

Then you can use graphviz, graph, and digraph Liquid Tag for creating amazing Graphviz images!

{% graphviz %}
digraph {
  node [shape=circle, style=filled];
  S [fillcolor=green];
  A [fillcolor=yellow];
  B [fillcolor=yellow];
  C [fillcolor=yellow];
  D [shape=doublecircle, fillcolor=green];
  S -> A [label=a];
  S -> B [label=b];
  A -> D [label=c];
  B -> D [label=d];
}
{% endgraphviz %}

You can also use diagraph and graph tag. e.g.

{% digraph %}
node [shape=circle, style=filled];
S [fillcolor=green];
A [fillcolor=yellow];
B [fillcolor=yellow];
C [fillcolor=yellow];
D [shape=doublecircle, fillcolor=green];
S -> A [label=a];
S -> B [label=b];
A -> D [label=c];
B -> D [label=d];
{% endgraphviz %}

Blockdiag

Blockdiag contains:

• blockdiag : simple block-diagram image generator
• seqdiag : simple sequence-diagram image generator
• actdiag : simple activity-diagram image generator
• nwdiag : simple network-diagram image generators

Fisrt you should install them via pip:

$ pip install blockdiag seqdiag actdiag nwdiag

And set $PATH to make sure your system can find it in $PATH.

Then you can use blockdiag, seqdiag, actdiag and nwdiag Liquid Tag. e.g.

{% blockdiag %}
blockdiag {
   A -> B -> C -> D;
   A -> E -> F -> G;
}
{% endblockdiag %}

And seqdiag:

{% seqdiag %}
seqdiag {
  browser  -> webserver [label = "GET /index.html"];
  browser <-- webserver;
  browser  -> webserver [label = "POST /blog/comment"];
              webserver  -> database [label = "INSERT comment"];
              webserver <-- database;
  browser <-- webserver;
}
{% endseqdiag %}

Configuration

A simple configuration shows below:

diagrams:
  graphviz:
    engine: dot
    options: '-Tsvg'
  diag:
    options: '-Tsvg --nodoctype'

Graphviz

engine is the default image render engine. Default is set to dot. You can also specify for every single image via:

{% graphviz neato %}
digraph {
  node [shape=circle, style=filled];
  S [fillcolor=green];
  A [fillcolor=yellow];
  B [fillcolor=yellow];
  C [fillcolor=yellow];
  D [shape=doublecircle, fillcolor=green];
  S -> A [label=a];
  S -> B [label=b];
  A -> D [label=c];
  B -> D [label=d];
}
{% endgraphviz %}

options is the command line options, and will be appended to the command. Default is set to '-Tsvg'.

Blockiag

options is the command line options, and will be appended to the command. Default is set to '-Tsvg --nodoctype'.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/zhustec/jekyll-diagrams. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.