README.md in liquid-diagrams-0.2.0 vs README.md in liquid-diagrams-0.3.0
- old
+ new
@@ -1,35 +1,51 @@
# Liquid Diagrams
[](https://rubygems.org/gems/liquid-diagrams)
[](https://github.com/zhustec/liquid-diagrams/actions?query=workflow%3ATest)
-[](https://github.com/zhustec/liquid-diagrams/actions?query=workflow%3ALint)
+[](https://travis-ci.com/zhustec/liquid-diagrams)
+[](https://github.com/zhustec/liquid-diagrams/actions?query=workflow%3ALint)
[](https://coveralls.io/github/zhustec/liquid-diagrams)
[](https://github.com/zhustec/liquid-diagrams/blob/master/LICENSE)
Liquid Diagrams is a liquid plugins for creating diagrams, it is inspired by [asciidoctor-diagram](https://github.com/asciidoctor/asciidoctor-diagram). Currently support:
- [**Blockdiag**](http://blockdiag.com/en/)
+- [**Bitfield**](https://github.com/wavedrom/bitfield)
- [**Erd**](https://github.com/BurntSushi/erd)
- [**GraphViz**](http://graphviz.org/)
- [**Mermaid**](https://mermaid-js.github.io/mermaid/)
- [**Nomnoml**](http://nomnoml.com/)
- [**PlantUML**](https://plantuml.com/)
- [**Svgbob**](https://ivanceras.github.io/svgbob-editor/)
- [**Syntrax**](https://kevinpt.github.io/syntrax/)
- [**Vega**](https://vega.github.io/vega/)
-- [**Vega-Lite**](https://vega.github.io/vega-lite/)
-- [**WaveDrom**](https://wavedrom.com/).
+- [**Vegalite**](https://vega.github.io/vega-lite/)
+- [**Wavedrom**](https://wavedrom.com/).
**NOTE:** This project is under development currently.
- [Installation](#installation)
- [Usage](#usage)
- - [List of diagrams](#list-of-diagrams)
+ - [Supported diagrams](#supported-diagrams)
- [Register diagrams](#register-diagrams)
- [Use diagrams tag](#use-diagrams-tag)
+ - [Parse Configurations](#parse-configurations)
+- [Prerequisites](#prerequisites)
- [Configurations](#configurations)
+ - [Blockdiag](#blockdiag)
+ - [Bitfield](#bitfield)
+ - [Erd](#erd)
+ - [Graphviz](#graphviz)
+ - [Mermaid](#mermaid)
+ - [Nomnoml](#nomnoml)
+ - [PlantUML](#plantuml)
+ - [State Machine Cat](#state-machine-cat)
+ - [Svgbob](#svgbob)
+ - [Syntrax](#syntrax)
+ - [Vega](#vega)
+ - [Wavedrom](#wavedrom)
- [Contributing](#contributing)
- [License](#license)
- [Code of Conduct](#code-of-conduct)
## Installation
@@ -58,42 +74,48 @@
# Require `liquid_diagrams` or `liquid-diagrams`
require 'liquid_diagrams'
```
-### List of diagrams
+### Supported diagrams
```ruby
+# All supported diagrams
LiquidDiagrams.diagrams
#=> [:actdiag, :blockdiag, :graphviz, :mermaid, ...]
-
-# Registered diagrams, no diagrams is registered by default
-LiquidDiagrams.registered_diagrams
-# => {}
```
### Register diagrams
+Diagrams must be registered before use, no diagrams is registered by default.
+
```ruby
+# Registered diagrams
+LiquidDiagrams.registered_diagrams
+# => {}
+
# Register one by one
LiquidDiagrams.register_diagram :graphviz
-# => LiquidDiagrams::Blocks::GraphvizBlock
# Register in batch
LiquidDiagrams.register_diagrams :blockdiag, :mermaid
-# => [Blocks::BlockdiagBlock, Blocks::MermaidBlock]
# Registered diagrams
LiquidDiagrams.registered_diagrams
# => {:graphviz => LiquidDiagrams::Blocks::GraphvizBlock, ...}
+```
-# Register all available diagrams
+You can register all diagrams with:
+
+```ruby
LiquidDiagrams.register_diagrams(LiquidDiagrams.diagrams)
```
### Use diagrams tag
+Now you can use diagrams tag in liquid template:
+
```ruby
content = <<~CONTENT
{% blockdiag %}
blockdiag {
A -> B -> C -> D;
@@ -105,13 +127,13 @@
template = Liquid::Template.parse(content)
template.render
# => "<svg ...>...</svg>"
```
-## Dependencies and Configurations
+### Parse Configurations
-Configurations can be set for each diagrams when parse content, e.g.:
+Configurations can be set for each diagrams when parse content:
```ruby
content = <<~CONTENT
{% blockdiag %}
blockdiag {
@@ -131,10 +153,120 @@
template = Liquid::Template.parse(content, liquid_diagrams: options)
template.render
# => "<svg ...>...</svg>"
```
-See [Configurations](CONFIGURATIONS.md)
+## Prerequisites
+
+You still need to install some dependencies, please refer to [Prerequisites](Prerequisites.md).
+
+## Configurations
+
+### Blockdiag
+
+| Config | Type | Default | Description |
+| ----------- | ------------- | ----------- | --------------------------------------- |
+| `antialias` | `boolean` | unspecified | Pass diagram image to anti-alias filter |
+| `font` | `string` | unspecified | use FONT to draw diagram |
+| `fontmap` | `string` | unspecified | use FONTMAP file to draw diagram |
+| `size` | `int` x `int` | unspecified | Size of diagram (ex. 320x240) |
+
+### Bitfield
+
+| Config | Type | Default | Description |
+| ------------ | -------- | ------------ | ---------------- |
+| `fontfamily` | `string` | "sans-serif" | font family |
+| `fontweight` | `string` | "normal" | font weight |
+| `fontsize` | `number` | 14 | font size |
+| `lanes` | `number` | 2 | rectangle lanes |
+| `vspace` | `number` | 80 | vertical space |
+| `hspace` | `number` | 640 | horizontal space |
+| `bits` | `number` | 32 | overall bitwidth |
+
+### Erd
+
+| Config | Type | Default | Description |
+| ------------ | --------- | ----------- | ------------------------------------- |
+| `config` | `string` | unspecified | Configuration file |
+| `edge` | `string` | unspecified | Select one type of edge |
+| `dot-entity` | `boolean` | unspecified | Use dot tables instead of HTML tables |
+
+Available values:
+
+- `edge`: `compound`, `noedge`, `ortho`, `poly`, `spline`
+
+### Graphviz
+
+| Config | Type | Default | Description |
+| ------------------ | --------- | ----------- | ---------------------------- |
+| `layout` | `string` | `dot` | Set layout engine |
+| `graph_attributes` | see below | unspecified | Set default graph attributes |
+| `node_attributes` | see below | unspecified | Set default node attributes |
+| `edge_attributes` | see below | unspecified | Set default edge attributes |
+
+**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' }`
+
+### Mermaid
+
+| Config | Type | Default | Description |
+| ----------------- | -------- | ------- | ------------------ |
+| `width` | `int` | 800 | Width of the page |
+| `height` | `int` | 600 | Height of the page |
+| `backgroundColor` | `string` | white | Background color |
+| `theme` | `string` | default | Theme of the chart |
+
+### Nomnoml
+
+Currently no configurations
+
+### PlantUML
+
+Currently no configurations
+
+### State Machine Cat
+
+| Config | Type | Default | Description |
+| ------------ | -------- | ---------- | ------------------------ |
+| `input-type` | `string` | `smcat` | Input type |
+| `engine` | `string` | `dot` | Layout engine to use |
+| `direction` | `string` | `top-down` | Direction of the diagram |
+
+Available values:
+
+- `input-type`: `smcat`, `scxml`, `json`
+- `egine`: `dot`, `circo`, `fdp`, `neato`, `osage`, `twopi`
+- `direction`: `top-down`, `bottom-top`, `left-right`, `right-left`
+
+### Svgbob
+
+| Config | Type | Default | Description |
+| -------------- | -------- | ------- | -------------------------- |
+| `font-family` | `string` | arial | Font |
+| `font-size` | `int` | 12 | Font size |
+| `scale` | `int` | 1 | Scale the entire svg |
+| `stroke-width` | `int` | 2 | stroke width for all lines |
+
+### Syntrax
+
+| Config | Type | Default | Description |
+| ------------- | --------- | ----------- | ---------------------- |
+| `scale` | `int` | 1 | Scale image |
+| `style` | `string` | unspecified | Style config file |
+| `transparent` | `boolean` | unspecified | Transparent background |
+
+### Vega
+
+| Config | Type | Default | Description |
+| ------- | ----- | ------- | ----------- |
+| `scale` | `int` | 1 | Scale image |
+
+### Wavedrom
+
+Currently no configurations
## Contributing
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](https://github.com/zhustec/liquid-diagrams/blob/master/CODE_OF_CONDUCT.md).