System design mermaid diagrams

Diagrams as code bootstrapper to quickly document your project or design new.

About mermaid

Diagrams as code

Please, read this article about diagrams as code


Mermaid is JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

  1. It do not require rendering server and handles all inside browser.
  2. It is part of GitHub markdown rendering engine and many other tools.
  3. It has many diagram types in a single tool.
Support Mermaid project with GitHub star


Please, use discussions for any questions and feedback.

C4 diagrams

Show application context and containers

Context diagram



Containers diagram


Entity relation diagram

Show application entities



Application architecture diagram

Show application entities, layers and components structure

Layer names: