• Link: Diagrams-as-Code (DaC)

Mermaid.js is a JavaScript-based tool that uses a Markdown-like text syntax to automatically render professional diagrams and charts. By adopting a "Diagrams as Code" approach, it eliminates the need for manual drawing tools, allowing you to create, edit, and version-control complex visuals directly within your documentation or code repository. This makes it an essential tool for teams who want to maintain up-to-date system architectures, workflows, and timelines without the friction of constantly exporting and re-uploading static image files.

Tools

• Mermaid.js works in Obsidian

Mermaid.js Examples

Example 1

graph LR
    A[Hard Magic System] --> B[Clear Rules]
    A --> C[Internal Consistency]
    B --> D[Satisfying Resolutions]

Example 2

classDiagram
    class Character {
        +String name
        +int mana
        +castSpell(spellName)
        +rechargeMana()
    }
    class MagicSystem {
        +List rules
        +validateCast()
    }
    Character --> MagicSystem : bound_by

classDiagram
    class Character {
        +String name
        +int mana
        +castSpell(spellName)
        +rechargeMana()
    }
    class MagicSystem {
        +List rules
        +validateCast()
    }
    Character --> MagicSystem : bound_by

Last Updated: 11/06/26