# Usage

> **Please make sure the Confluence Server can connect to** [**https://app-nwtmwlxsha-uk.a.run.app**](https://app-nwtmwlxsha-uk.a.run.app/). **We use this Web Service to render the diagrams. The content of the diagrams is not kept in our server.**

## Render UML Diagrams Macro

The **Render UML Diagrams** macro ([https://mermaid-js.github.io/mermaid/#/](https://mermaid-js.github.io/mermaid/#/)) uses Mermaid to render UML diagrams. It allows you to define UML diagrams in plain-text format just like Markdown.

For a live editor to draft your diagrams, please try [https://mermaidjs.github.io/mermaid-live-editor](https://mermaidjs.github.io/mermaid-live-editor).

In the Confluence editor, open the **Select macro** dialog. The macro name is **Render UML Diagrams**.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F572f5259beaa7ccd3716d458feca0a1ae5675322.png?generation=1621504370645814\&alt=media)

Select the macro, then click **Insert**.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F5bcef9e9acba4677718013303fbefeabb78d3e4a.png?generation=1621504370669201\&alt=media)

Type the content of the UML diagram into the macro editor. Here is an example:

```
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F3efdc79e2aa1e8e1e074afdefa3e681f900925fc.png?generation=1621504370630392\&alt=media)

Save the page, and the UML diagram will be rendered.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F364b3279ec8b5b00c9f6d01a54add9b0d3f504cf.png?generation=1621504371527864\&alt=media)

## Render Graphviz Diagrams Macro

The Graphviz layout programs ([https://www.graphviz.org/](https://www.graphviz.org/)) take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser. Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.

You can find more Graphviz examples [here](https://graphs.grevian.org/example).

In the Confluence editor, open the **Select macro** dialog. The macro name is **Render Graphviz Diagrams**.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F675c1716db3d9cab21c56465eb9335eecf8cd6bf.png?generation=1621504370679643\&alt=media)

Select the macro, then click **Insert**.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2F7f60a99e296575b47e5f41129a236e5e371d8ded.png?generation=1621504370678287\&alt=media)

Type the content of the Graphviz diagram into the macro editor. Here is an example:

```
graph {
  a -- b;
  b -- c;
  a -- c;
  d -- c;
  e -- c;
  e -- a;
}
```

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2Ff0bd8766b218835680ffbc8fae25a5941a2f607a.png?generation=1621504370653000\&alt=media)

Save the page, and the Graphviz diagram will be rendered.

![Mermaid UML Diagrams and Graphviz Diagrams for Confluence](https://3588362646-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma7ua4NoSptEMaVrDMS%2Fsync%2Faa8d8862a99c9f892bdde87013fd7b079b93e75e.png?generation=1621504370707190\&alt=media)
