asciidoctor-diagram 2.2.9 → 2.2.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f5d112b2ce57cb2380687fce2fac5fe15f2f6d2c6198f722edd5aeaa08d6b7d
-  data.tar.gz: 8d45d7df6757adfb72c0c4c4b9ba95bab649fe6a1686418f2a4ffc49fc20facb
+  metadata.gz: 1bfca2be423a9db1007e03538becdecb79c4b6dab96c698ff46a7371f7df7859
+  data.tar.gz: 492e1e9161ab35281af8b6c2dc639e4efddf7262c7bb0385e989db5acc27fce1
 SHA512:
-  metadata.gz: 56d0bffc577cd54b56853b02454760767ff5642c935eb57e9909a0aad974ad598897e2d5f312c780471f55318de0789df39e760b917e846ec702ad0ee1640a7f
-  data.tar.gz: 67496690a923714ba8b3757781b674862dc318680797bb118ecc00d834125b42d27770465b57db440b47ce0df3e4eebab8658d7a2aec8e5cf610bef886005655
+  metadata.gz: 39dc7473cf4fa31dff27eb63b86885511745fb926cba3fe6836746e2aa64a756b8eb052a43d73d518362ad53f1baa28238ac65d2f24932e7475f7b19ee304218
+  data.tar.gz: 3ae05389b433de9a5514c16571f31fc33b3fbeb9111a5e77f5ee2ac377de2d737cad8dc305cd90405d10a91ad97c429c6eba51b1747acbbf1d253328fac47aaa

data/CHANGELOG.adoc

@@ -1,9 +1,31 @@
 = Asciidoctor-diagram Changelog
 
+== 2.2.11
+
+Bugfixes::
+
+* Issue #424: avoid invalid filename characters on Windows
+
+== 2.2.10
+
+Enhancements::
+
+* The location of JSyntrax and Structurizr can now also be specified using Java system properties when using JRuby.
+* Add initial https://penrose.cs.cmu.edu[Penrose] support
+
+Bugfixes::
+
+* Ensure Structurizr themes are loaded when rendering images
+* Issue #416: Silence Asciidoctor warning when using inline macros
+* Issue #417: Avoid reusing images when block type is different but source code is identical
+* Remove usage of LilyPond's 'safe' option since it's no longer supported
+
+
 == 2.2.9
 
 Bugfixes::
 
+* Resolve UTF-8 encoding error when generating SVG for GS1-128 barcodes
 * Issue #409: Second attempt at fixing handling of the D2 `sketch` attribute
 * Issue #415: Resolve NoMethodError when using Structurizr blocks
 

data/docs/antora.yml

@@ -1,3 +1,5 @@
 name: diagram-extension
 title: Asciidoctor Diagram
-version: '2.2'
+version: '2.2'
+nav:
+  - modules/ROOT/nav.adoc

data/docs/modules/ROOT/images/a2s.svg

@@ -0,0 +1,44 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Created with ASCIItoSVG -->
+<svg width="261px" height="176px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="dsFilter" width="150%" height="150%">
+      <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2"/>
+      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
+      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="3"/>
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
+    </filter>
+    <marker id="iPointer"
+      viewBox="0 0 10 10" refX="5" refY="5"
+      markerUnits="strokeWidth"
+      markerWidth="8" markerHeight="15"
+      orient="auto">
+      <path d="M 10 0 L 10 10 L 0 5 z" />
+    </marker>
+    <marker id="Pointer"
+      viewBox="0 0 10 10" refX="5" refY="5"
+      markerUnits="strokeWidth"
+      markerWidth="8" markerHeight="15"
+      orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" />
+    </marker>
+  </defs>
+  <g id="closed" filter="url(#dsFilter)" stroke="#000" stroke-width="2" fill="none">
+    <path id="closed0" fill="#fff" filter="url(#dsFilter)" d="M 13.5 18 Q 13.5 8 23.5 8 L 22.5 8 L 31.5 8 L 40.5 8 L 49.5 8 L 58.5 8 L 67.5 8 L 76.5 8 L 85.5 8 L 94.5 8 L 103.5 8 L 112.5 8 L 121.5 8 L 130.5 8 L 139.5 8 L 148.5 8 L 157.5 8 L 166.5 8 L 175.5 8 L 184.5 8 L 193.5 8 L 202.5 8 L 211.5 8 L 220.5 8 L 229.5 8 L 238.5 8 L 237.5 8 Q 247.5 8 247.5 18 L 247.5 24 L 247.5 40 L 247.5 56 L 247.5 72 L 247.5 88 L 247.5 104 L 247.5 120 L 247.5 126 Q 247.5 136 237.5 136 L 238.5 136 L 229.5 136 L 220.5 136 L 211.5 136 L 202.5 136 L 193.5 136 L 184.5 136 L 175.5 136 L 166.5 136 L 157.5 136 L 148.5 136 L 139.5 136 L 130.5 136 L 121.5 136 L 112.5 136 L 103.5 136 L 94.5 136 L 85.5 136 L 76.5 136 L 67.5 136 L 58.5 136 L 49.5 136 L 40.5 136 L 31.5 136 L 22.5 136 L 23.5 136 Q 13.5 136 13.5 126 L 13.5 120 L 13.5 104 L 13.5 88 L 13.5 72 L 13.5 56 L 13.5 40 L 13.5 24 Z" />
+    <path id="closed1" fill="#fff" filter="url(#dsFilter)" d="M 31.5 50 Q 31.5 40 41.5 40 L 40.5 40 L 49.5 40 L 58.5 40 L 67.5 40 L 76.5 40 L 75.5 40 Q 85.5 40 85.5 50 L 85.5 56 L 85.5 72 L 85.5 78 Q 85.5 88 75.5 88 L 76.5 88 L 67.5 88 L 58.5 88 L 49.5 88 L 40.5 88 L 41.5 88 Q 31.5 88 31.5 78 L 31.5 72 L 31.5 56 Z" />
+    <path id="closed3" fill="#fff" filter="url(#dsFilter)" d="M 103.5 50 Q 103.5 40 113.5 40 L 112.5 40 L 121.5 40 L 130.5 40 L 139.5 40 L 148.5 40 L 147.5 40 Q 157.5 40 157.5 50 L 157.5 56 L 157.5 72 L 157.5 78 Q 157.5 88 147.5 88 L 148.5 88 L 139.5 88 L 130.5 88 L 121.5 88 L 112.5 88 L 113.5 88 Q 103.5 88 103.5 78 L 103.5 72 L 103.5 56 Z" />
+    <path id="closed5" fill="#fff" filter="url(#dsFilter)" d="M 175.5 50 Q 175.5 40 185.5 40 L 184.5 40 L 193.5 40 L 202.5 40 L 211.5 40 L 220.5 40 L 219.5 40 Q 229.5 40 229.5 50 L 229.5 56 L 229.5 72 L 229.5 78 Q 229.5 88 219.5 88 L 220.5 88 L 211.5 88 L 202.5 88 L 193.5 88 L 184.5 88 L 185.5 88 Q 175.5 88 175.5 78 L 175.5 72 L 175.5 56 Z" />
+  </g>
+  <g id="lines" stroke="#000" stroke-width="2" fill="none">
+    <path id="open2" d="M 31.5 50 Q 31.5 40 41.5 40 L 40.5 40 L 49.5 40 L 58.5 40 L 67.5 40 L 76.5 40 L 75.5 40 Q 85.5 40 85.5 50 L 85.5 56 L 85.5 72 L 85.5 78 Q 85.5 88 75.5 88 L 76.5 88 L 77.5 88 Q 67.5 88 67.5 78 L 67.5 82 Q 67.5 72 57.5 72 L 58.5 72 L 59.5 72 Q 49.5 72 49.5 62 L 49.5 66 Q 49.5 56 59.5 56 L 58.5 56 L 57.5 56 Q 67.5 56 67.5 46 " />
+    <path id="open4" marker-end="url(#Pointer)" d="M 175.5 50 Q 175.5 40 185.5 40 L 184.5 40 L 193.5 40 L 202.5 40 L 211.5 40 L 220.5 40 L 219.5 40 Q 229.5 40 229.5 50 L 229.5 56 L 229.5 72 L 229.5 78 Q 229.5 88 219.5 88 L 220.5 88 L 211.5 88 L 202.5 88 L 193.5 88 L 184.5 88 L 185.5 88 Q 175.5 88 175.5 78 L 175.5 72 L 184.5 72 L 193.5 72 L 202.5 72 " />
+    <path id="open6" marker-end="url(#Pointer)" d="M 103.5 56 L 112.5 56 L 121.5 56 L 130.5 56 " />
+    <path id="open7" marker-start="url(#iPointer)" d="M 202.5 56 L 211.5 56 L 220.5 56 " />
+    <path id="open8" marker-start="url(#iPointer)" d="M 130.5 72 L 139.5 72 L 148.5 72 " />
+  </g>
+  <g id="text" stroke="none" style="font-family:Consolas,Monaco,Anonymous Pro,Anonymous,Bitstream Sans Mono,monospace;font-size:15.2px" >
+    <text id="obj9" x="40.5" y="104" fill="#000">ascii</text>
+    <text id="obj10" x="130.5" y="104" fill="#000">2</text>
+    <text id="obj11" x="193.5" y="104" fill="#000">svg</text>
+  </g>
+</svg>

data/docs/modules/ROOT/nav.adoc

@@ -0,0 +1,41 @@
+* xref:index.adoc[]
+* xref:blocks.adoc[]
+* xref:installation.adoc[]
+* xref:generate.adoc[]
+* xref:output.adoc[]
+* Diagram Types
+** xref:diagram_types/a2s.adoc[]
+** xref:diagram_types/actdiag.adoc[]
+** xref:diagram_types/barcode.adoc[]
+** xref:diagram_types/blockdiag.adoc[]
+** xref:diagram_types/bpmn.adoc[]
+** xref:diagram_types/bytefield.adoc[]
+** xref:diagram_types/d2.adoc[]
+** xref:diagram_types/dbml.adoc[]
+** xref:diagram_types/diagrams.adoc[]
+** xref:diagram_types/ditaa.adoc[]
+** xref:diagram_types/erd.adoc[]
+** xref:diagram_types/gnuplot.adoc[]
+** xref:diagram_types/graphviz.adoc[]
+** xref:diagram_types/lilypond.adoc[]
+** xref:diagram_types/meme.adoc[]
+** xref:diagram_types/mermaid.adoc[]
+** xref:diagram_types/msc.adoc[]
+** xref:diagram_types/nomnoml.adoc[]
+** xref:diagram_types/nwdiag.adoc[]
+** xref:diagram_types/penrose.adoc[]
+** xref:diagram_types/pikchr.adoc[]
+** xref:diagram_types/plantuml.adoc[]
+** xref:diagram_types/seqdiag.adoc[]
+** xref:diagram_types/shaape.adoc[]
+** xref:diagram_types/smcat.adoc[]
+** xref:diagram_types/structurizr.adoc[]
+** xref:diagram_types/svgbob.adoc[]
+** xref:diagram_types/symbolator.adoc[]
+** xref:diagram_types/syntrax.adoc[]
+** xref:diagram_types/tikz.adoc[]
+** xref:diagram_types/umlet.adoc[]
+** xref:diagram_types/vega.adoc[]
+** xref:diagram_types/wavedrom.adoc[]
+* Advanced Topics
+** xref:enabling.adoc[]

data/docs/modules/ROOT/{partials/create_diagram.adoc → pages/blocks.adoc}

@@ -1,6 +1,11 @@
-== Creating a Diagram
+= Diagram Blocks
+include::partial$uris.adoc[]
 
-A diagram is written inside a literal block, which can accept several attributes.
+Embedded diagrams are written using diagram blocks.
+Diagram blocks are delimited using either the literal or listing delimiter.
+which can accept several attributes.
+
+All diagram block types share a similar structure.
 
 .Anatomy of a diagram
 ----
@@ -14,51 +19,51 @@ Diagram in appropriate syntax
 <3> The `format` attribute determines the output image format to use. If a format is not specified, the default output format for the chosen diagram type will be used.
 <4> Place the attribute list directly on top of the delimited literal block (+....+). You can also use an open block as an alternative (`--`).
 
-The following diagram types and output formats are available:
-
-:check: &#10003;
-
-[cols=">,5*^",options="header"]
-|===
-|Diagram Type                      |gif    |pdf    |png    |svg    |txt
-|{uri-a2s}[a2s]                    |       |       |       |{check}|{check}
-|{uri-actdiag}[actdiag]            |       |{check}|{check}|{check}|
-|<<barcode,barcode>>               |       |       |{check}|       |{check}
-|{uri-blockdiag}[blockdiag]        |       |{check}|{check}|{check}|
-|{uri-bpmn}[bpmn]                  |       |{check}|{check}|{check}|
-|{uri-bytefield}[bytefield]        |       |       |       |{check}|
-|{uri-d2}[D2]                      |       |{check}|{check}|{check}|
-|{uri-diagrams}[diagrams]          |       |{check}|{check}|{check}|
-|{uri-ditaa}[ditaa]                |       |       |{check}|{check}|{check}
-|{uri-dpic}[dpic]                  |       |       |       |{check}|
-|{uri-erd}[erd]                    |       |       |{check}|{check}|
-|{uri-gnuplot}[gnuplot]            |{check}|       |{check}|{check}|{check}
-|{uri-dot}[graphviz]               |       |{check}|{check}|{check}|
-|<<meme,meme>>                     |{check}|       |{check}|       |
-|{uri-mermaid}[mermaid]            |       |{check}|{check}|{check}|
-|{uri-mscgen}[msc]                 |       |       |{check}|{check}|
-|{uri-nomnoml}[nomnoml]            |       |       |       |{check}|
-|{uri-nwdiag}[nwdiag]              |       |{check}|{check}|{check}|
-|{uri-packetdiag}[packetdiag]      |       |{check}|{check}|{check}|
-|{uri-pikchr}[pikchr]              |       |       |       |{check}|
-|{uri-plantuml}[plantuml]          |       |       |{check}|{check}|{check}
-|{uri-rackdiag}[rackdiag]          |       |{check}|{check}|{check}|
-|{uri-seqdiag}[seqdiag]            |       |{check}|{check}|{check}|
-|{uri-shaape}[shaape]              |       |       |{check}|{check}|
-|{uri-smcat}[smcat]                |       |       |       |{check}|
-|{uri-structurizr}[structurizr]    |       |       |{check}|{check}|
-|{uri-svgbob}[svgbob]              |       |       |       |{check}|{check}
-|{uri-symbolator}[symbolator]      |       |{check}|{check}|{check}|
-|{uri-syntrax}[syntrax] (Syntrax)  |       |{check}|{check}|{check}|
-|{uri-jsyntrax}[syntrax] (JSyntrax)|       |       |{check}|{check}|
-|{uri-tikz}[tikz]                  |       |{check}|       |{check}|
-|{uri-umlet}[umlet]                |{check}|{check}|{check}|{check}|
-|{uri-vega}[vega]                  |       |       |{check}|{check}|
-|{uri-vegalite}[vegalite]          |       |       |{check}|{check}|
-|{uri-wavedrom}[wavedrom]          |       |       |{check}|{check}|
-|===
-
-:!check:
+== Diagram Macros
+
+The diagram extensions can also be used in inline, or block macro form.
+
+.Anatomy of a diagram block macro
+----
+diagram-type::source-file-name[format=output-format] // <1> <2> <3>
+----
+<1> The macro name specifies the diagram syntax that is being used.
+<2> The source file name specifies the external file that contains the diagram source code.
+<3> The `format` attribute determines the output image format to use. If a format is not specified, the default output format for the chosen diagram type will be used.
+
+When the source file name is a relative path it is resolved with respect to the location of the document being processed.
+
+== Specifying Diagram Attributes
+
+Some diagram types allow image generation to be customized using attributes.
+
+Attributes can be assigned to individual diagram blocks by adding them to the attribute list of the block.
+
+If the same attribute value should be applied to all blocks of a given diagram type, the attribute can also be assigned indirectly by defining an attribute at the document level.
+The attribute name at the document level should be prefixed with the diagram type name and a dash.
+
+This is illustrated for the blockdiag `fontpath` attribute in the example below.
+
+.Diagram attributes per block and global
+----
+= Asciidoctor Diagram
+:blockdiag-fontpath: /path/to/font.ttf <1>
+
+[blockdiag] <2>
+....
+....
+
+[blockdiag, fontpath="/path/to/otherfont.ttf"] <3>
+....
+....
+----
+<1> Attributes can be specified for all diagram of a certain type at the document level by prefixing them with `<blocktype>-`.
+In this example, the `fontpath` attribute is specified for all diagrams of type `blockdiag`.
+<2> The first diagram does not specify an explicit value for `fontpath` so the global `blockdiag-fontpath` value will be used
+<3> The second diagram does specify a `fontpath` value.
+This overrides the global `blockdiag-fontpath` value.
+
+== Example
 
 The example below illustrates the structure of a basic ditaa block written directly in an AsciiDoc document.
 
@@ -110,7 +115,6 @@ Both examples below would result in a file called `ditaa-diagram.png`.
 ----
 ....
 
-
 The example below illustrates the structure of a basic PlantUML block written directly in an AsciiDoc document.
 
 .PlantUML Diagram Syntax

data/docs/modules/ROOT/pages/diagram_types/a2s.adoc

@@ -0,0 +1,47 @@
+= ASCIIToSVG
+include::partial$uris.adoc[]
+
+{uri-a2s}[ASCIIToSVG] is a pretty simple Go library (with an accompanying CLI tool) that parses ASCII art diagrams, attempting to convert them to an aesthetically pleasing SVG output.
+
+== Example
+
+----
+[a2s, format="svg"]
+....
+.-------------------------.
+|                         |
+| .---.-. .-----. .-----. |
+| | .-. | +-->  | |  <--| |
+| | '-' | |  <--| +-->  | |
+| '---'-' '-----' '-----' |
+|  ascii     2      svg   |
+|                         |
+'-------------------------'
+....
+----
+
+image::a2s.svg[]
+
+== Installation
+
+- Install the https://go.dev[Go] runtime
+- Run `go install github.com/asciitosvg/asciitosvg@latest`
+
+== Supported Image Formats
+
+- SVG (default)
+- TXT
+
+== Attributes
+
+include::partial$/shared-attrs.adoc[]
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|a2s          |a2s             |The path to the `a2s` executable
+|fontfamily   |unspecified     |The font family to use in the generated SVG image
+|noblur       |unspecified     |Disable drop-shadow blurring
+|===

data/docs/modules/ROOT/pages/diagram_types/actdiag.adoc

@@ -0,0 +1,46 @@
+= ActDiag
+include::partial$uris.adoc[]
+
+{uri-actdiag}[actdiag] generates activity-diagram images from .diag files (similar to graphviz’s DOT files).
+
+== Example
+
+----
+[actidag, format="png"]
+....
+actdiag {
+  write -> convert -> image
+
+  lane user {
+     label = "User"
+     write [label = "Writing reST"];
+     image [label = "Get diagram IMAGE"];
+  }
+  lane actdiag {
+     convert [label = "Convert reST to Image"];
+  }
+}
+....
+----
+
+image::actdiag.png[]
+
+== Installation
+
+- A Python runtime is required
+- Follow the http://blockdiag.com/en/actdiag/introduction.html#setup[actdag installation instructions]
+
+== Supported Image Formats
+
+- PDF
+- PNG (default)
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|actdiag      |actdiag         |The path to the `actdiag` executable
+|fontpath     |unspecified     |The path to the font that should be used by blockdiag
+|===

data/docs/modules/ROOT/pages/diagram_types/barcode.adoc

@@ -0,0 +1,72 @@
+= Barcode
+include::partial$uris.adoc[]
+
+The barcode extension provides barcode rendering.
+Barcode macros can be specified using blocks, block macros, or inline macros using one of the following templates.
+
+[source, asciidoc]
+------
+// Barcode block
+[<type>, <attributes>] <1> <2>
+----
+<content> <3>
+----
+
+// Barcode block macro
+<type>::<content>[<attributes>]
+
+// Barcode inline macro
+<type>:<content>[<attributes>]
+------
+<1> Type barcode type. One of `bookland`, `codabar`, `code25`, `code25iata`, `code25interleaved`, `code39`, `code93`, `code128`, `code128a`, `code128b`, `code128c`, `ean8`, `ean13`, `gs1_128`, `qrcode`, or `upca`.
+<2> <<Attributes>>
+<3> The content to encode in the barcode
+
+By default, the `content` field of the barcode macros will be interpreted as the barcode content.
+This works fine for simple barcodes, but for complex data (e.g., a vCard encoded as a QR code) this is not practical.
+If the `external` attribute is set on a barcode macro, the target is interpreted as a file path.
+The barcode content will then be obtained by reading the contents of the referenced file.
+
+== Example
+
+----
+Barcdodes can be written codabar:A31117013206375A[png, height=10] inline or as blocks.
+
+[qrcode, format="png", xdim=4]
+....
+Hello World!
+....
+----
+
+Barcode can be written image:barcode.png[] inline or as blocks.
+
+image::barcode2.png[]
+
+== Installation
+
+- All barcodes types except QR codes require the https://rubygems.org/gems/barby[barby Ruby gem]
+- QR codes requires the https://rubygems.org/gems/rqrcode[rqrcode Ruby gem]
+- PNG image output requires the https://rubygems.org/gems/chunky_png[chunky_png gem]
+
+Each of these dependencies will automatically get loaded as needed.
+It is not necessary to require these manually using the `-r` Asciidoctor CLI option.
+
+== Supported Image Formats
+
+- PNG
+- SVG (default)
+- TXT
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name          |Default value |Description
+|external      |false         |When set to true the target of a barcode macro is interpreted as an external source file instead of as the contents of the barcode
+|height        |100           |The height of the bars. (1D only, 2D uses ydim)
+|xdim          |1             |The width of the narrowest bar in a barcode. Thicker bars are multiples of the xdim.
+|ydim          |Same as xdim  |This is the same as xdim, but for the height of the blocks in a 2D barcode.
+|margin        |10            |The width of the quiet zone around the barcode.
+|foreground    |black         |The color of the bars specified as a 3 or 6 digit hex RGB value or HTML color name.
+|background    |white         |The color of the background specified as a 3 or 6 digit hex RGB value or HTML color name.
+|===

data/docs/modules/ROOT/pages/diagram_types/blockdiag.adoc

@@ -0,0 +1,38 @@
+= BlockDiag
+include::partial$uris.adoc[]
+
+{uri-blockdiag}[BlockDiag] and its family generate diagram images from simple text files.
+
+== Example
+
+----
+[blockdiag]
+....
+blockdiag {
+   A -> B -> C -> D;
+   A -> E -> F -> G;
+}
+....
+----
+
+image::blockdiag.png[]
+
+== Installation
+
+- A Python runtime is required
+- Follow the http://blockdiag.com/en/blockdiag/introduction.html#setup[blockdiag installation instructions]
+
+== Supported Image Formats
+
+- PDF
+- PNG (default)
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|blockdiag    |blockdiag       |The path to the `blockdiag` executable
+|fontpath     |unspecified     |The path to the font that should be used by blockdiag
+|===

data/docs/modules/ROOT/pages/diagram_types/bpmn.adoc

@@ -0,0 +1,21 @@
+= BPMN
+include::partial$uris.adoc[]
+
+Business Process Model and Notation (BPMN) is a graphical representation for specifying business processes in a business process model.
+This extension uses {uri-bpmn}[bpmn-js-cmd] to render diagrams
+
+== Supported Image Formats
+
+- PDF
+- PNG (default)
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|bpmn         |bpmn            |The path to the `bpmn` executable
+|height       |786             |The target height of the diagram. Does not apply for output type `svg`.
+|width        |1024            |The target width of the diagram. Does not apply for output type `svg`.
+|===

data/docs/modules/ROOT/pages/diagram_types/bytefield.adoc

@@ -0,0 +1,16 @@
+= Bytefield-SVG
+include::partial$uris.adoc[]
+
+{uri-bytefield}[Bytefield-SVG] is a Node module for generating byte field diagrams like this one. Inspired by the LaTeX bytefield package.
+
+== Supported Image Formats
+
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|bytefield-svg|bytefield-svg   |The path to the `bytefield-svg` executable
+|===

data/docs/modules/ROOT/pages/diagram_types/d2.adoc

@@ -0,0 +1,43 @@
+= D2
+include::partial$uris.adoc[]
+
+{uri-D2}[D2] is a diagram scripting language that turns text to diagrams.
+It stands for Declarative Diagramming.
+Declarative, as in, you describe what you want diagrammed, it generates the image.
+
+== Example
+
+----
+[d2]
+....
+donut: {shape: circle}
+database.shape: cylinder
+you: {
+  shape: person
+}
+....
+----
+
+image::d2.png[]
+
+== Supported Image Formats
+
+- PDF
+- PNG
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name            |Default value                 |Description
+|d2              |d2                            |The path to the `d2` executable
+|layout          |dagre                         |Set the diagram layout engine
+|theme           |0                             |Set the diagram theme ID
+|pad             |100                           |Pixels padded around the rendered diagram
+|animate-interval|                              |If given, multiple boards are packaged as 1 SVG which transitions through each board at the interval (in milliseconds). Can only be used with SVG exports.
+|sketch          |false                         |Renders the diagram to look like it was sketched by hand
+|font-regular    |Source Sans Pro Regular       |Path to .ttf file to use for the regular font
+|font-italic     |Source Sans Pro Regular-Italic|Path to .ttf file to use for the italic font
+|font-bol        |Source Sans Pro Bold          |Path to .ttf file to use for the bold font
+|===

data/docs/modules/ROOT/pages/diagram_types/dbml.adoc

@@ -0,0 +1,16 @@
+= DBML
+include::partial$uris.adoc[]
+
+{uri-dbml}[dbml-renderer] renders https://dbml.dbdiagram.io/home/#intro[DBML] files to SVG images.
+
+== Supported Image Formats
+
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name            |Default value                 |Description
+|dbml-renderer   |dbml-renderer                 |The path to the `dbml-renderer` executable
+|===

data/docs/modules/ROOT/pages/diagram_types/diagrams.adoc

@@ -0,0 +1,20 @@
+= Diagrams
+include::partial$uris.adoc[]
+
+{uri-diagrams}[Diagrams] lets you draw the cloud system architecture in Python code.
+It was born for prototyping a new system architecture without any design tools.
+You can also describe or visualize the existing system architecture as well.
+
+== Supported Image Formats
+
+- PDF
+- PNG (default)
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name           |Default value   |Description
+|diagrams-python|diagrams-python |The path to the `diagrams-python` executable
+|===

data/docs/modules/ROOT/pages/diagram_types/ditaa.adoc

@@ -0,0 +1,31 @@
+= Ditaa
+include::partial$uris.adoc[]
+
+{uri-ditaa}[ditaa] is a small command-line utility written in Java, that can convert diagrams drawn using ascii art ('drawings' that contain characters that resemble lines like | / - ), into proper bitmap graphics.
+
+A https://github.com/pepijnve/ditaa[fork of the ditaa] project is bundled with the asciidoctor-diagram gem.
+
+== Supported Image Formats
+
+- PNG (default)
+- SVG
+- TXT
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name         |Default value   |Description
+|java         |java            |The path to the `java` executable
+|scale        |1               |A scale factor that is applied to the image.
+|tabs         |8               |An integer value that specifies the tab size as a number of spaces.
+|background   |FFFFFF          |The background colour of the image. The format should be a six-digit hexadecimal number (as in HTML, FF0000 for red). Pass an eight-digit hex to define transparency.
+|antialias    |true            |Enables or disables anti-aliasing.
+|separation   |true            |Prevents the separation of common edges of shapes.
+|round-corners|false           |Causes all corners to be rendered as round corners.
+|shadows      |true            |Enables or disable drop shadows.
+|debug        |false           |Renders the debug grid over the resulting image.
+|fixed-slope  |false           |Makes sides of parallelograms and trapezoids fixed slope instead of fixed width.
+|transparent  |false           |Makes the background of the image transparent instead of using the background color.
+|bullet-characters|*o          |The characters to recognize as bullets
+|===

data/docs/modules/ROOT/pages/diagram_types/dpic.adoc

@@ -0,0 +1,16 @@
+= Dpic
+include::partial$uris.adoc[]
+
+{uri-dpic}[dpic] is an implementation of the https://en.wikipedia.org/wiki/PIC_(markup_language)[pic] DSL.
+
+== Supported Image Formats
+
+- SVG
+
+== Attributes
+
+[cols=">,<,<",options="header"]
+|===
+|Name           |Default value   |Description
+|dpic           |dpic            |The path to the `dpic` executable
+|===