# Jekyll Diagrams [![Build Status](https://travis-ci.org/farkasity/jekyll-diagrams.svg?branch=master)](https://travis-ci.org/farkasity/jekyll-diagrams.svg) [![Build status](https://ci.appveyor.com/api/projects/status/f5l7k3971pmjbjcq?svg=true)](https://ci.appveyor.com/project/farkasity/jekyll-diagrams) [![Dependency Status](https://gemnasium.com/farkasity/jekyll-diagrams.svg)](https://gemnasium.com/farkasity/jekyll-diagrams) [![Code Climate](https://codeclimate.com/github/farkasity/jekyll-diagrams/badges/gpa.svg)](https://codeclimate.com/github/farkasity/jekyll-diagrams) [![Inline Docs](https://inch-ci.org/github/farkasity/jekyll-diagrams.svg)](https://inch-ci.org/github/farkasity/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: ```ruby group :jekyll_plugins do gem 'jekyll-diagrams' end ``` And then execute: ```bash $ bundle ``` ### Or installing manually ```bash $ gem install jekyll-diagrams ``` And then add this line to your application's `_config.yml` file: ```yaml gems: - 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 %} ``` ### Diag Diag 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`: ```bash $ 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: ```yaml 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'. ### Diag `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/farkasity/jekyll-diagrams. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. ## License The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).