Guidance for FHIR IG Creation, published by HL7 International - FHIR Management Group. This guide is not an authorized publication; it is the continuous build for version 0.1.0 built by the FHIR (HL7® FHIR® Standard) CI Build. This version is based on the current content of https://github.com/FHIR/ig-guidance/ and changes regularly. See the Directory of published versions

Adding diagrams (Mermaid)

Mermaid diagrams can be included by placing diagram code in an element with class="mermaid".

Introduction to Mermaid

Mermaid is a versatile scripting language that enables the creation of various types of diagrams through simple text definitions. Mermaid's simplicity and flexibility make it a popular choice for embedding visual representations directly within documentation or web pages.

For more detailed syntax and examples, the Mermaid syntax reference guide and the interactive tool Mermaid live editor are excellent resources. There are also plugins for popular editors like VS Code.

Diagram Types

Mermaid supports a range of diagram types, such as:

• Flowcharts: Visualize logical steps in a process.
• Sequence Diagrams: Detail interactions among parts within a system.
• User Journeys: Map out the path a user travels through a product.
• Mindmaps: Show the branching relationships between concepts or tasks.
• and many more…

Including Mermaid Diagrams in Your Documentation

To include a Mermaid diagram in your documentation, you simply need to place the diagram code within an HTML element with the class mermaid. Here is a simple example of an inline Mermaid diagram:

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

If you're writing markdown, you can use a <div> as shown above, or you can use a ```mermaid code block like:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

It renders as:

In this example, the div element can be replaced with any other HTML element, as long as the mermaid class is included. During the webpage rendering process, any elements with the class mermaid will be automatically replaced with an SVG of the diagram described by the contained Mermaid code.

Practical Implementation

1. Create the Diagram Code: Write your Mermaid diagram code according to the syntax and diagram type you need.
2. Embed in HTML: Place your diagram code within an HTML element with the class mermaid as shown in the example above.