Skip to content
Mermaid Studio Logo Mermaid Studio

    Architecture Diagrams

    Architecture diagrams display system components, services, and their relationships using cloud-style iconography.

    Example

    Section titled “Example”
    architecture-beta
      group cloud(cloud)[Cloud]
      service api(server)[API] in cloud
      service db(database)[Database] in cloud
      api:R --> L:db

    IDE Support

    Section titled “IDE Support”

    Mermaid Studio provides basic support for architecture diagrams:

    • Syntax highlighting for groups, services, and connections
    • Live preview with architecture visualization
    • Error detection for invalid syntax

    Learn More

    Section titled “Learn More”

    For complete syntax documentation including icon types and junction connections, see the Mermaid.js Architecture documentation.