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.


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:

    = Diagrams Extension Example with Kroki.io
    The sequence diagram is below:
    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
  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.