Mermaid Diagramsβ
Aboutβ
Mermaid lets you create diagrams and visualizations using text and code.
It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
If you are familiar with Markdown you should have no problem learning Mermaid's Syntax.
Live-Editor Tutorialsβ
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
Chris Chinchilla: Hands on - Text-based diagrams with Mermaid
GitLab Unfiltered: How to Create Mermaid Diagrams
GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook
World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS
Eddie Jaoude: Can you code your diagrams?
Tools #Development/Toolsβ
- Mermaid Online Live Editorβ
Links: 020 - Development | Javascript | Markdown
Sources: - π CDN | π Documentation | π Contribution | π Changelog - mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. (mermaid-js.github.io) - Syntax and Configuration (mermaid-js.github.io) - Mermaid's Syntax - Overview for Beginners (mermaid-js.github.io) - mermaid-js (github.com) | mermaid-js/mermaid (github.com) | mermaid-js/mermaid-cli (github.com) - Mermaid Online Live Editor