A Markdown-inspired text language for encoding graphs and charts.

“Mermaid” is the name of a JavaScript tool that translates text into Charts and graphs. It handles things like:

It is a newer, brighter-burning cousin to PlantUML. Mermaid has native support in GitLab, Notion, Obsidian, and soon GitHub (among other places).

There is an excellent free Progressive Web App for creating, learning about, and sharing Mermaid diagrams: Online FlowChart & Diagrams Editor - Mermaid Live Editor

Since I originally wrote this note Mermaid introduced many new great features:

  • Frontmatter support for titles & config info
  • New syntactic sugar, like A & B —> C for creating two links on the same line
  • Lollipop connectors & bi-directional arrows
  • New chart types

Examples

Check Deployed Version

info

ER Diagram

---
title: Example!
---
erDiagram
    CUSTOMER||--o{ ORDER: places
    ORDER||--|{ LINE-ITEM: contains
    CUSTOMER}|..|{ DELIVERY-ADDRESS: uses

XYChart

…not yet supported in Obsidian.

xychart-beta
    title "Height"
    x-axis [Aaron, Melissa, Ben, Grif]
    y-axis "Height (in)" 30 --> 90
    bar [38, 47, 69, 80]

Source