Liquid Diagrams

Liquid Diagrams is a liquid plugins for rendering svg diagrams, it is inspired by asciidoctor-diagram. Currently support: Blockdiag, Bitfield, Erd, GraphViz, Mermaid, Nomnoml, Netlistsvg, PlantUML, Svgbob, Syntrax, Vega, Vega-Lite, Wavedrom.

• Installation
• Usage
  • Supported diagrams
  • Register diagrams
  • Use diagrams tag
  • Parse Configurations
• Prerequisites
• Configurations
  • Blockdiag
  • Bitfield
  • Erd
  • Graphviz
  • Mermaid
  • Netlistsvg
  • Nomnoml
  • PlantUML
  • State Machine Cat
  • Svgbob
  • Syntrax
  • Vega
  • Vega-Lite
  • Wavedrom
• Contributing
• License
• Code of Conduct

Add this line to your application's Gemfile:

gem 'liquid-diagrams'

And then execute:

bundle install

Or install it yourself as:

gem install liquid-diagrams

# Require `liquid_diagrams` or `liquid-diagrams`

require 'liquid_diagrams'

# All supported diagrams
LiquidDiagrams.diagrams
#=> [:actdiag, :blockdiag, :graphviz, :mermaid, ...]

Diagrams must be registered before use, no diagrams is registered by default.

# Registered diagrams
LiquidDiagrams.registered_diagrams
# => {}

# Register one by one
LiquidDiagrams.register_diagram :graphviz

# Register in batch
LiquidDiagrams.register_diagrams :blockdiag, :mermaid

# Registered diagrams
LiquidDiagrams.registered_diagrams
# => {:graphviz => LiquidDiagrams::Blocks::GraphvizBlock, ...}

You can register all diagrams with:

LiquidDiagrams.register_diagrams(LiquidDiagrams.diagrams)

Now you can use diagrams tag in liquid template:

content = <<~CONTENT
  {% blockdiag %}
    blockdiag {
      A -> B -> C -> D;
      A -> E -> F -> G;
    }
  {% endblockdiag %}
CONTENT

template = Liquid::Template.parse(content)
template.render
# => "<svg ...>...</svg>"

Configurations can be set for each diagrams when parse content:

content = <<~CONTENT
  {% blockdiag %}
    blockdiag {
      A -> B -> C -> D;
      A -> E -> F -> G;
    }
  {% endblockdiag %}
CONTENT

options = {
  blockdiag: {
    'scale' => 3
  }
  # options for other diagrams
}

template = Liquid::Template.parse(content, liquid_diagrams: options)
template.render
# => "<svg ...>...</svg>"

You still need to install some dependencies, please refer to Prerequisites.

Warning: All default configuration are provided by upstream, so it maybe different from here.

Available values:

• edge: compound, noedge, ortho, poly, spline

NOTICE: attributes can be:

• String: eg. color=red
• Array: eg. ['color=blue', 'fontsize=14] or [['color', 'blue'], ['fontsize', '14']]
• Hash: eg. { color: 'green', fontsize: '14' }

Currently no configurations

Currently no configurations

Currently no configurations

Available values:

• input-type: smcat, scxml, json
• egine: dot, circo, fdp, neato, osage, twopi
• direction: top-down, bottom-top, left-right, right-left

Currently no configurations

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

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

Everyone interacting in the liquid-diagrams project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.