{"id":13558086,"url":"https://github.com/zhustec/jekyll-diagrams","last_synced_at":"2025-10-04T20:10:40.518Z","repository":{"id":6085485,"uuid":"144378415","full_name":"zhustec/jekyll-diagrams","owner":"zhustec","description":"A Jekyll plugin with support for Blockdiag, Erd, GraphViz, Mermaid, Nomnoml, PlantUML, Svgbob, Syntrax, Vega, Vega-Lite and WaveDrom. ","archived":false,"fork":false,"pushed_at":"2022-03-09T14:29:38.000Z","size":7798,"stargazers_count":43,"open_issues_count":2,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-06T16:11:36.345Z","etag":null,"topics":["actdiag","blockdiag","erd","graphviz","jekyll","jekyll-diagrams","jekyll-plugin","mermaid","nwdiag","packetdiag","plantuml","rackdiag","seqdiag","state-machine-cat","vega","vega-lite","wavedrom"],"latest_commit_sha":null,"homepage":"https://zhustec.github.io/jekyll-diagrams/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhustec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-11T11:04:00.000Z","updated_at":"2024-11-23T19:24:49.000Z","dependencies_parsed_at":"2022-08-07T13:15:09.938Z","dependency_job_id":null,"html_url":"https://github.com/zhustec/jekyll-diagrams","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhustec%2Fjekyll-diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhustec%2Fjekyll-diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhustec%2Fjekyll-diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhustec%2Fjekyll-diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhustec","download_url":"https://codeload.github.com/zhustec/jekyll-diagrams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230523761,"owners_count":18239445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actdiag","blockdiag","erd","graphviz","jekyll","jekyll-diagrams","jekyll-plugin","mermaid","nwdiag","packetdiag","plantuml","rackdiag","seqdiag","state-machine-cat","vega","vega-lite","wavedrom"],"created_at":"2024-08-01T12:04:44.295Z","updated_at":"2025-10-04T20:10:35.477Z","avatar_url":"https://github.com/zhustec.png","language":"Ruby","funding_links":[],"categories":["Ruby","jekyll"],"sub_categories":[],"readme":"# Jekyll Diagrams\n\n[![Gem](https://img.shields.io/gem/v/jekyll-diagrams.svg?label=Gem\u0026style=flat-square)](https://rubygems.org/gems/jekyll-diagrams)\n[![Test](https://img.shields.io/github/workflow/status/zhustec/jekyll-diagrams/Test?label=Test\u0026style=flat-square)](https://github.com/zhustec/jekyll-diagrams/actions?query=workflow%3ATest)\n[![Feature](https://img.shields.io/travis/zhustec/jekyll-diagrams.svg?label=Feature\u0026style=flat-square)](https://travis-ci.com/zhustec/jekyll-diagrams)\n[![Linter](https://img.shields.io/github/workflow/status/zhustec/jekyll-diagrams/Linter?label=Linter\u0026style=flat-square)](https://github.com/zhustec/jekyll-diagrams/actions?query=workflow%3ALinter)\n[![Coverage](https://img.shields.io/coveralls/github/zhustec/jekyll-diagrams?label=Coverage\u0026style=flat-square)](https://coveralls.io/github/zhustec/jekyll-diagrams)\n[![License](https://img.shields.io/github/license/zhustec/jekyll-diagrams.svg?label=License\u0026style=flat-square)](https://github.com/zhustec/jekyll-diagrams/blob/master/LICENSE)\n\nJekyll Diagrams is a jekyll plugins for creating diagrams, it is inspired by [asciidoctor-diagram](https://github.com/asciidoctor/asciidoctor-diagram). Currently support:\n\n- [**Blockdiag**](http://blockdiag.com/en/)\n- [**Erd**](https://github.com/BurntSushi/erd)\n- [**GraphViz**](http://graphviz.org/)\n- [**Mermaid**](https://mermaid-js.github.io/mermaid/)\n- [**Nomnoml**](http://nomnoml.com/)\n- [**PlantUML**](https://plantuml.com/)\n- [**Svgbob**](https://ivanceras.github.io/svgbob-editor/)\n- [**Syntrax**](https://kevinpt.github.io/syntrax/)\n- [**Vega**](https://vega.github.io/vega/)\n- [**Vega-Lite**](https://vega.github.io/vega-lite/)\n- [**WaveDrom**](https://wavedrom.com/).\n\n\n**WARNING:** Since it is just 0.x.x currently, internal implementation maybe **CHANGED FREQUENTLY**. So don't rely on the internal implementation unless you know what you are doing.\n\n**NOTICE:** This plugin render **SVG** format image and directly **embed into html file**, so you don't need to worry about where to store the image. But, please feel free to tell me if you **unlikely** want other image format.\n\n- [Installation](#installation)\n- [Configurations](#configurations)\n  - [Error Mode](#error-mode)\n- [Usage](#usage)\n  - [Blockdiag](#blockdiag)\n  - [Erd](#erd)\n  - [Graphviz](#graphviz)\n  - [Mermaid](#mermaid)\n  - [Nomnoml](#nomnoml)\n  - [PlantUML](#plantuml)\n  - [State Machine Cat](#state-machine-cat)\n  - [Svgbob](#svgbob)\n  - [Syntrax](#syntrax)\n  - [Vega](#vega)\n  - [Wavedrom](#wavedrom)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nAdd the following to your site's `_config.yml`:\n\n```yaml\nplugins:\n  - jekyll-diagrams\n```\n\nAnd the following to your site's `Gemfile`:\n\n```ruby\ngroup :jekyll_plugins do\n  gem 'jekyll-diagrams'\nend\n```\n\nFinally run:\n\n```bash\n$ bundle install\n```\n\n## Configurations\n\nConfigurations can be set in your site's config file under `jekyll-diagrams` key as below:\n\n```yaml\njekyll-diagrams:\n  graphviz:\n    # configurations for graphviz\n  blockdiag:\n    # configurations for blockdiag\n  syntrax:\n    # configurations for syntrax\n  # and so on\n```\n\nYou can override global config in the front matter of each page, e.g.\n\n```text\n---\ntitle: Custom configurations per page\n\njekyll-diagrams:\n  graphviz:\n    # configurations for graphviz\n---\n\n# Your content\n```\n\n### Error Mode\n\nYou can use `error_mode` to configure how to response to errors. `jekyll-diagrams` respect the global [liquid options](https://jekyllrb.com/docs/configuration/liquid/):\n\n```yaml\nliquid:\n  error_mode: 'mode'\n```\n\nAvaliable options:\n\n- `lax`: Ignore all errors\n- `warn`: Output a warning on the console for each error\n- `strict`: Output an error message and stop the build\n\nYou can also override it for just `jekyll-diagrams`:\n\n```yaml\njekyll-diagrams:\n  error_mode: 'mode'\n```\n\n## Usage\n\n### Blockdiag\n\n#### Prerequisites\n\nInstall it.\n\n```bash\n$ pip3 install blockdiag seqdiag actiag nwdiag\n```\n\nThen you can use following tags:\n\n* `blockdiag`\n* `seqdiag`\n* `actdiag`\n* `nwdiag`\n* `rackdiag`\n* `packetdiag`\n\n#### Examples\n\n```text\n{% blockdiag %}\nblockdiag {\n   A -\u003e B -\u003e C -\u003e D;\n   A -\u003e E -\u003e F -\u003e G;\n}\n{% endblockdiag %}\n```\n\nAnd `seqdiag`:\n\n```text\n{% seqdiag %}\nseqdiag {\n  browser  -\u003e webserver [label = \"GET /index.html\"];\n  browser \u003c-- webserver;\n  browser  -\u003e webserver [label = \"POST /blog/comment\"];\n              webserver  -\u003e database [label = \"INSERT comment\"];\n              webserver \u003c-- database;\n  browser \u003c-- webserver;\n}\n{% endseqdiag %}\n```\n\n#### Configurations\n\n| Config      | Default     | Description                             |\n| ----------- | ----------- | --------------------------------------- |\n| `antialias` | unspecified | Pass diagram image to anti-alias filter |\n| `font`      | unspecified | use FONT to draw diagram                |\n| `fontmap`   | unspecified | use FONTMAP file to draw diagram        |\n| `size`      | unspecified | Size of diagram (ex. 320x240)           |\n\n### Erd\n\n#### Prerequisites\n\n- Install Graphviz\n- Install Erd\n\n```bash\n$ sudo apt install graphviz cabal-install\n$ cabal update \u0026\u0026 cabal install erd\n```\n\n#### Examples\n\n```text\n{% erd %}\n[Person]\n*name\nheight\nweight\n`birth date`\n+birth_place_id\n\n[`Birth Place`]\n*id\n`birth city`\n'birth state'\n\"birth country\"\n\nPerson *--1 `Birth Place`\n{% enderd %}\n```\n\n#### Configurations\n\n| Config       | Default     | Description                                                                |\n| ------------ | ----------- | -------------------------------------------------------------------------- |\n| `config`     | unspecified | Configuration file                                                         |\n| `edge`       | unspecified | Select one type of edge: compound, noedge, ortho, poly, spline             |\n| `dot-entity` | unspecified | When set, output will consist of regular dot tables instead of HTML tables |\n\n### Graphviz\n\n#### Prerequisites\n\nInstall it.\n\n#### Examples\n\n```text\n{% graphviz %}\ndigraph {\n  node [shape=circle, style=filled];\n  S [fillcolor=green];\n  A [fillcolor=yellow];\n  B [fillcolor=yellow];\n  C [fillcolor=yellow];\n  D [shape=doublecircle, fillcolor=green];\n  S -\u003e A [label=a];\n  S -\u003e B [label=b];\n  A -\u003e D [label=c];\n  B -\u003e D [label=d];\n}\n{% endgraphviz %}\n```\n\n#### Configurations\n\n| Config             | Default     | Description                  |\n| ------------------ | ----------- | ---------------------------- |\n| `default_layout`   | dot         | Set layout engine            |\n| `graph_attributes` | unspecified | Set default graph attributes |\n| `node_attributes`  | unspecified | Set default node attributes  |\n| `edge_attributes`  | unspecified | Set default edge attributes  |\n| `encoding`         | utf-8       | Set default SVG encoding     |\n\n**NOTICE:** attributes can be `String`(when just one attribute), `Array` or `Hash`.\n\n### Mermaid\n\n#### Prerequisites\n\nInstall `mermaid.cli`.\n\n```bash\n$ npm install -g mermaid.cli\n```\n\n**Notice:** You may need to install some missing libraries, follow the output of `mmdc`.\n\n#### Examples\n\n```text\n{% mermaid %}\nsequenceDiagram\n    participant John\n    participant Alice\n    Alice-\u003e\u003eJohn: Hello John, how are you?\n    John--\u003e\u003eAlice: Great!\n{% endmermaid %}\n```\n\n#### Configurations\n\n| Config            | Default | Description                                                   |\n| ----------------- | ------- | ------------------------------------------------------------- |\n| `width`           | 800     | Width of the page                                             |\n| `height`          | 600     | Height of the page                                            |\n| `backgroundColor` | white   | Background color. Example: transparent, red, '#F0F0F0'        |\n| `theme`           | default | Theme of the chart, could be default, forest, dark or neutral |\n\n### Nomnoml\n\n#### Prerequisites\n\nInstall it.\n\n```bash\n$ npm install -g nomnoml\n```\n#### Examples\n\n```text\n{% nomnoml %}\n[Pirate|eyeCount: Int|raid();pillage()|\n  [beard]--[parrot]\n  [beard]-:\u003e[foul mouth]\n]\n\n[\u003cabstract\u003eMarauder]\u003c:--[Pirate]\n[Pirate]- 0..7[mischief]\n[jollyness]-\u003e[Pirate]\n[jollyness]-\u003e[rum]\n[jollyness]-\u003e[singing]\n[Pirate]-\u003e *[rum|tastiness: Int|swig()]\n[Pirate]-\u003e[singing]\n[singing]\u003c-\u003e[rum]\n\n[\u003cstart\u003est]-\u003e[\u003cstate\u003eplunder]\n[plunder]-\u003e[\u003cchoice\u003emore loot]\n[more loot]-\u003e[st]\n[more loot] no -\u003e[\u003cend\u003ee]\n\n[\u003cactor\u003eSailor] - [\u003cusecase\u003eshiver me;timbers]\n{% endnomnoml %}\n```\n\n### PlantUML\n\n#### Prerequisites\n\nInstall java runtime.\n\n```bash\n$ sudo apt install default-jre\n```\n\n#### Examples\n\n```text\n{% plantuml %}\n@startuml\nclass Car\n\nDriver - Car : drives \u003e\nCar *- Wheel : have 4 \u003e\nCar -- Person : \u003c owns\n\n@enduml\n{% endplantuml %}\n```\n\n### State Machine Cat\n\n#### Prerequisites\n\nInstall it.\n\n```bash\n$ npm install -g state-machine-cat\n```\n\n#### Examples\n\n```text\n{% smcat %}\ninitial,\n\"tape player off\",\n\"tape player on\" {\n  stopped =\u003e playing : play;\n  playing =\u003e stopped : stop;\n  playing =\u003e paused  : pause;\n  paused  =\u003e playing : pause;\n  paused  =\u003e stopped : stop;\n};\n\ninitial           =\u003e \"tape player off\";\n\"tape player off\" =\u003e stopped           : power;\n\"tape player on\"  =\u003e \"tape player off\" : power;\n{% endsmcat %}\n```\n\n#### Configuration\n\n| Config       | Default    | Description                                                                         |\n| ------------ | ---------- | ----------------------------------------------------------------------------------- |\n| `input-type` | `smcat`    | Input type. `smcat scxml json`                                                      |\n| `engine`     | `dot`      | Layout engine to use. `dot circo fdp neato osage twopi`                             |\n| `direction`  | `top-down` | Direction of the state machine diagram. `top-down bottom-top left-right right-left` |\n\n### Svgbob\n\n#### Prerequisites\n\nInstall `svgbob_cli`.\n\n```bash\n$ sudo apt install cargo\n$ cargo install svgbob_cli\n```\n\n#### Examples\n\n```text\n{% svgbob %}\n                           .---\u003e  F\n  A       B      C  D     /\n  *-------*-----*---*----*-----\u003e  E\n           \\            ^ \\\n            v          /   '---\u003e  G\n             B --\u003e C -'\n{% endsvgbob %}\n```\n\n#### Configuration\n\n| Config         | Default | Description                                                |\n| -------------- | ------- | ---------------------------------------------------------- |\n| `font-family`  | arial   | Font                                                       |\n| `font-size`    | 12      | Font size                                                  |\n| `scale`        | 1       | Scale the entire svg (dimensions, font size, stroke width) |\n| `stroke-width` | 2       | stroke width for all lines                                 |\n\n### Syntrax\n\n#### Prerequisites\n\n- Install Pango, Cairo and PangoCairo support\n- Install `syntrax`\n\n```bash\n$ sudo apt install libpango1.0-dev python3-cairo python3-gi python3-gi-cairo\n$ pip3 install syntrax\n```\n\n#### Examples\n\n```text\n{% syntrax %}\nindentstack(10,\n  line(opt('-'), choice('0', line('1-9', loop(None, '0-9'))),\n    opt('.', loop('0-9', None))),\n\n  line(opt(choice('e', 'E'), choice(None, '+', '-'), loop('0-9', None)))\n)\n{% endsyntrax %}\n```\n\n#### Configurations\n\n| Config        | Default     | Description            |\n| ------------- | ----------- | ---------------------- |\n| `scale`       | 1           | Scale image            |\n| `style`       | unspecified | Style config file      |\n| `transparent` | false       | Transparent background |\n\n### Vega\n\n#### Prerequisites\n\nInstall `vega-cli` and `vega-lite`.\n\n```bash\n$ npm install -g vega-cli vega-lite\n```\n\nThe you can use `vega` and `vegalite` tag.\n\n\n#### Examples\n\n```text\n{% vegalite %}\n{\n  \"\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n  \"description\": \"A simple bar chart with embedded data.\",\n  \"data\": {\n    \"values\": [\n      {\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43},\n      {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53},\n      {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}\n    ]\n  },\n  \"mark\": \"bar\",\n  \"encoding\": {\n    \"x\": {\"field\": \"a\", \"type\": \"ordinal\"},\n    \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n  }\n}\n{% endvegalite %}\n```\n\n#### Configurations\n\n| Config  | Default | Description         |\n| ------- | ------- | ------------------- |\n| `scale` | 1       | Scale image[Number] |\n\n### Wavedrom\n\n#### Prerequisites\n\nInstall `wavedrom-cli`.\n\n```bash\n$ npm install -g wavedrom-cli\n```\n\n#### Examples\n\n```text\n{% wavedrom %}\n{signal: [\n  {name: 'clk', wave: 'p.....|...'},\n  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},\n  {name: 'req', wave: '0.1..0|1.0'},\n  {name: 'ack', wave: '1.....|01.'}\n]}\n{% endwavedrom %}\n```\n\n## Contributing\n\nBug 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](http://contributor-covenant.org) code of conduct.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhustec%2Fjekyll-diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhustec%2Fjekyll-diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhustec%2Fjekyll-diagrams/lists"}