Introducing Architecture Diagrams in Mermaid

Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.

We’re thrilled to announce that Mermaid now supports architecture diagrams! This powerful new feature, brought to life by the efforts of our newest core team member, @NicolasNewman, empowers you to visually map out the relationships between services and resources, such as those within Cloud or CI/CD deployments.

What Are Architecture Diagrams? #

Architecture diagrams are a tool for illustrating how services (nodes) interact with each other through connections (edges). These diagrams are perfect for depicting the flow and organization within your systems. By grouping related services, you can create a clear and organized visual representation of your infrastructure.

And the best part? You can make your diagrams even more intuitive by incorporating icons!

Sample Code #

Here’s a sneak peek at how you can create your own architecture diagrams using Mermaid:

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

In this example, services like databases, storage, and servers are neatly grouped within the API cloud group, showcasing their interactions through labeled connections as you can see in the follwing diagram rendered from the code:

Icon Support #

By default, Mermaid’s architecture diagrams come with built-in support for a variety of essential icons such as cloud, database, disk, internet, and server. But why stop there? You can elevate your diagrams by choosing from over 200,000+ icons available at Iconify or even adding your own custom icons.

Explore available icon packs at Icones. We’ve streamlined the process so that you can use shorter, more intuitive names for your icons, making it easier to create and customize diagrams to fit your unique needs.