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

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

Questions

Please, use discussions for any questions and feedback.

C4 diagrams

Show application context and containers

Context diagram

Participants:

        

Containers diagram


        

Entity relation diagram

Show application entities

Entities:

        

Application architecture diagram

Show application entities, layers and components structure

Layer names: