← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid C4 diagram online editor

Explain software architecture from system context to detailed components. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the C4 editor See an example

WHAT IT IS FOR

Make the important relationships clear

Explain software architecture at the right level, from people and systems to containers and components.

  • Create system context diagrams
  • Align teams on service boundaries
  • Document architecture decisions
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

C4Context
  title Mermaid Studio System Context
  Person(user, "User", "Create and share diagrams")
  System(web, "Next.js Web", "Editor and Dashboard")
  System(api, "Nest API", "Project and permission management")
  Rel(user, web, "Use")
  Rel(web, api, "HTTPS/JSON")

HOW TO START

Create your diagram in four steps

  1. 1Choose the architecture level you need.
  2. 2Name people, systems, containers, or components consistently.
  3. 3Add relationships and the direction of interaction.
  4. 4Remove details that do not support the current decision.

WRITING TIPS

Keep the diagram useful

Choose one level of detail per diagram.

Name people, systems, containers, and components consistently.

FAQ

Frequently asked questions

What is a C4 diagram?+

C4 is a way to describe software architecture through context, container, component, and code-level views.

Which C4 level should I start with?+

Start with the system context when the audience needs boundaries and neighboring systems before adding implementation detail.

TEMPLATES

Start from a related template

Platform context map

Explain how users and external systems interact with a platform.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a C4?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio