Diagrams Extension Quickstart

In this quick start you’ll:

  • create an AsciiDoc file that both holds and displays a diagram when viewed with the Asciidoctor Browser Extension

  • configure the extension to use Kroki

  • view the converted diagram

  • stop the extension using Kroki

Below is an example diagram showing communication between the Diagrams extension and the Kroki.io server set by the Server URL in Extension Options.

diagrams extension sequence
Figure 1. Diagrams extension sequence

The diagram above uses the PlantUML diagram generator via Kroki. To learn more about embedding diagrams, other diagram languages and PlantUML, visit kroki.io and plantuml.com.

Steps

To create the above diagram after installing the Asciidoctor Browser Extension, do the following:

  1. Create a file "diagram-extension-example.adoc" with the following contents:

    diagram-extension-example.adoc
    = Diagrams Extension Example with Kroki.io

The sequence diagram is below:

[plantuml]
....
@startuml
entity "Local or remote file" as file
box Browser #white
participant Browser as browser
participant "Asciidoctor\nBrowser Extension" as extension
box "Kroki Server" #white
participant "Kroki Gateway" as kroki
participant "Diagram generator" as generator
end box
file -> browser : AsciiDoc
browser -> extension : AsciiDoc
activate extension
extension -> kroki : encoded diagram text
kroki -> generator : diagram text
kroki <- generator : image
extension <- kroki : image
browser <- extension : HTML5
deactivate extension
@enduml
....

  2. Enable the Diagrams extension with the default Server URL from the extension options. For help enabling and disabling the Diagrams extension, see the Extension Options page.

  3. Open or reload the above file in the browser to see the diagram.

  4. Modify the diagram text in the AsciiDoc and reload the page to see your updated diagram.

  5. Disable the Diagrams extension.

    Disable the Diagrams extension to stop communication with the Server URL.