Embedding Diagrams Into Documentation in AsciiDoctor

Embedding Diagrams Into Documentation in AsciiDoctor

AsciiDoctor integrates well with diagram editors that take their input from text, in a seamless way. AsciiArt, GraphViz Dot, and even UML are supported. Here’s how to achieve that.

Having this in our document:

[plantuml, asciidoc-plant-uml-sample, svg]
-------------------------------------------
class A<T> <<singleton>> {
    {abstract} -int x
    {static} #void meta()
}

class B

A <|-- B
-------------------------------------------

Would generate:

AsciiDoctor supports plugins for creating diagrams. The content is parsed via the plugin, in this case plantuml. The rendered image is then embedded as a regular image into the document.

How awesome is that?!

AsciiDoctor supports a lot of renderers for diagrams. Boxes with ditaa?:

[ditaa, /documents/public/assets/generated/asciidoc-ditaa-sample]
--------------------------------------------------------------------------
 Page
+------------------------------+---------------------------+
|                              |                           |
|                              +---------------+           |
|                              |   left_of()   |           |
|                              |   reference   |           |
|                              |   element     |           |
|                              +---------------+           |
|                              |                           |
|      Considered Region       |        Excluded Region    |
|       +---------+            |           +---------+     |
|       | Input() |            |           | Input() |     |
|       |     cAEA|            |           |     cD99|     |
|c9D9   +---------+            |  cA77     +---------+     |
+------------------------------+---------------------------+
--------------------------------------------------------------------------

Same notation, different renderer.

Feel free to create amazing looking diagrams using AsciiArt, that render as awesome pictures in your documentation.

Article Photo from Pexels: https://www.pexels.com/photo/woman-drawing-colorful-circles-1391374/