LinkORB Engineering

Use Mermaid.js and PlantUML to build custom visuals in [#markdown]


This site and the LinkORB internal wiki use Mermaid.js and PlantUML to render diagrams.

Using Mermaid.js

Add a diagram to a Markdown page on this site (engineering.linkorb.com) or the LinkORB internal wiki using Mermaid.js syntax as follows:

  1. Wrap the diagram’s code in a Markdown code block, that is, three backticks (also known as a backquote).
  2. Write the word mermaid after the opening set of three back ticks.
  3. Write the code for the Mermaid.js model/diagram between the two sets of three back ticks as shown below.

Below is a full Mermaid.js example.

```mermaid
    erDiagram
        CAR ||--o{ NAMED-DRIVER : allows
        CAR {
            string registrationNumber
            string make
            string model
        }
        PERSON ||--o{ NAMED-DRIVER : is
        PERSON {
            string firstName
            string lastName
            int age
        } 
```
CARstringregistrationNumberstringmakestringmodelNAMED-DRIVERPERSONstringfirstNamestringlastNameintageallowsis

Using PlantUML on this site

To use PlantUML syntax in Markdown files on engineering.linkorb.com:

  1. Create a <pre> tag and set its class attribute to language-pantuml (i.e. <pre class="language-plantuml"></pre>).
  2. Between the opening and closing <pre> tags, wrap the diagram’s code in a Markdown code block, that is, three backticks (also known as a backquote) as shown below.

Below is a full PlantUML example.

<pre class="language-plantuml">
```
    @startwbs
        * Business Process Modelling WBS
        ** Launch the project
        *** Complete Stakeholder Research
        *** Initial Implementation Plan
    @endwbs
```
</pre>

    @startwbs
        * Business Process Modelling WBS
        ** Launch the project
        *** Complete Stakeholder Research
        *** Initial Implementation Plan
    @endwbs

Using PlantUML on the LinkORB internal wiki

When using PlantUML syntax on the LinkORB internal wiki, you DO NOT need to wrap the diagram’s code in <pre> tags. Simply wrap the diagram in a Markdown code block (three backticks (also known as a backquote)) and specify plantuml as the language as shown below. Place the word plantuml immediately after the first set of three backticks.

Below is a full PlantUML example.

```plantuml
    @startwbs
        * Business Process Modelling WBS
        ** Launch the project
        *** Complete Stakeholder Research
        *** Initial Implementation Plan
    @endwbs
```

    @startwbs
        * Business Process Modelling WBS
        ** Launch the project
        *** Complete Stakeholder Research
        *** Initial Implementation Plan
    @endwbs

Online live editors

Live online editors for each of the above solutions can be found below, which may help assist technical writers to learn and leverage them in their work.

About Markdown