Visualizations

Visualizations

Visualization with Mermaid offers a powerful and intuitive way to bring complex ideas to life through diagrams and charts. From flowcharts that map intricate workflows to Gantt charts for project timelines, Mermaid transforms plain text into dynamic visual content.

Whether creating entity-relationship diagrams to model database structures, sequence diagrams for system processes, or class diagrams for object-oriented programming, Mermaid adapts seamlessly to diverse use cases.

With its easy-to-learn syntax and real-time rendering, this tool empowers users to communicate concepts clearly and effectively, making it an indispensable resource for developers, project managers, educators, and designers alike.

JavaScript

The following <script> need to be placed near the end of the pages:

<!-- JavaScript Files -->
<script src="/assets/js/lib/mermaid-11.4.1.min.js?id=e066e3"></script>
<script src="/assets/js/ui/datepicker.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      mermaid.initialize({ startOnLoad: true });
    });
  <script>

the code need to be within a <div class="mermaid"></div> or <pre class="mermaid"></pre> block.

For example, it is possible to create a Gantt Chart:

<pre class="mermaid">
    gantt
      title Project Timeline
      dateFormat  YYYY-MM-DD
      section Planning
      Define requirements       :done, 2024-12-01, 5d
      Develop specifications    :active, 2024-12-06, 7d
      section Development
      Development phase 1       :2024-12-14, 10d
      Development phase 2       :2024-12-25, 10d
      section Testing
      Integration Testing       :2025-01-05, 7d
      Final Testing             :2025-01-15, 5d
</pre>

    gantt
      title Project Timeline
      dateFormat  YYYY-MM-DD
      section Planning
      Define requirements       :done, 2024-12-01, 5d
      Develop specifications    :active, 2024-12-06, 7d
      section Development
      Development phase 1       :2024-12-14, 10d
      Development phase 2       :2024-12-25, 10d
      section Testing
      Integration Testing       :2025-01-05, 7d
      Final Testing             :2025-01-15, 5d
  

To make a custom theme, it is necessary to modify themeVariables via init.

It is necessary to use the base theme as it is the only modifiable theme.

<pre class="mermaid">
erDiagram
    ASTRONAUT ||--o{ MISSION : participates_in
    MISSION ||--|{ SPACECRAFT : uses
    SPACECRAFT ||--o{ MODULE : contains
    SPACECRAFT ||--o{ PAYLOAD : carries
    PLANET ||--o{ LANDING_SITE : has
    MISSION ||..o{ PLANET : targets
    PLANET }|..|{ MOON : orbits
    MOON }|--|{ LANDING_SITE : has

    ASTRONAUT {
        string name
        int age
        string specialization
    }
    MISSION {
        string missionName
        date launchDate
        date returnDate
    }
    SPACECRAFT {
        string spacecraftName
        string type
        int crewCapacity
    }
    MODULE {
        string moduleName
        string function
    }
    PAYLOAD {
        string payloadType
        int weight
    }
    PLANET {
        string planetName
        string atmosphereType
        int radius
    }
    MOON {
        string moonName
        string hostPlanet
        int radius
    }
    LANDING_SITE {
        string siteName
        string locationCoordinates
    }
</pre>

erDiagram
    ASTRONAUT ||--o{ MISSION : participates_in
    MISSION ||--|{ SPACECRAFT : uses
    SPACECRAFT ||--o{ MODULE : contains
    SPACECRAFT ||--o{ PAYLOAD : carries
    PLANET ||--o{ LANDING_SITE : has
    MISSION ||..o{ PLANET : targets
    PLANET }|..|{ MOON : orbits
    MOON }|--|{ LANDING_SITE : has

    ASTRONAUT {
        string name
        int age
        string specialization
    }
    MISSION {
        string missionName
        date launchDate
        date returnDate
    }
    SPACECRAFT {
        string spacecraftName
        string type
        int crewCapacity
    }
    MODULE {
        string moduleName
        string function
    }
    PAYLOAD {
        string payloadType
        int weight
    }
    PLANET {
        string planetName
        string atmosphereType
        int radius
    }
    MOON {
        string moonName
        string hostPlanet
        int radius
    }
    LANDING_SITE {
        string siteName
        string locationCoordinates
    }