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.
The following <script>
need to be placed near the end of the pages:
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:
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.
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 }