In the current project, sometimes I need to prepare basic design document and when I need to create diagrams I'd use Mermaid since it helps me create diagrams easily and quickly with just a few lines of code without using any design tools.
WHAT IS MERMAID ?
Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
HOW DOES IT WORK ?
When Mermaid encounters code blocks marked as
mermaid, it generate an iframe that takes the raw Mermaid syntax and passes it to Mermaid.js, turning that code into a diagram in browser.
mermaid sequenceDiagram; participant A as User participant B as Frontend participant C as Backend Note over A: User logged in A->>B: Access Domain rect rgba(255, 165, 1, 0.5) Note over B: Home page end B->>C: Call API rect rgba(255, 165, 1, 0.5) Note left of C: Get home page info API Note over C: Get data C->>B: Data Response Note over B: Home page end B->>A: Note over A: Show home page
You can see a diagram like this.