Use Mermaid.js and PlantUML to build custom visuals

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

Using Mermaid.js on this site

Add a Mermaid.js diagram to a Markdown page on this site (engineering.linkorb.com) or the internal wiki by wrapping the diagram in a code block with the language set to mermaid as shown in the below 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
    }
```

allows

is

CAR

string

registrationNumber

string

make

string

model

NAMED-DRIVER

PERSON

string

firstName

string

lastName

int

age

Using PlantUML on this site

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

  1. Place a Markdown code block in a :::pre directive with its class name set to language-plantuml.
  2. Add the PlantUML diagram to the code block that is inside the :::pre directive as shown below:
:::pre{.language-plantuml}

```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

Using PlantUML on the LinkORB internal wiki

When using PlantUML diagrams on the LinkORB internal wiki, you DO NOT need to wrap the diagram’s code in a directive. Simply wrap the diagram in a Markdown code block and set the language to plantuml as shown in the below 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.