Architecture Diagram

Mermaid Studio provides language support for Mermaid Architecture diagrams inside IntelliJ IDEA and other JetBrains IDEs. Architecture diagrams display system components, services, and their relationships using cloud-style iconography.

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Armada Dark

Islands Dark

Islands Light

IDE Support

Mermaid Studio provides comprehensive support for architecture diagrams:

• Syntax highlighting for groups, services, edges, and junctions
• Code completion for keywords, edge syntax, and icon names
• Preview-to-source navigation - click an element in the live preview to jump to its definition
• Rename refactoring to update service and group names
• Find usages to locate references to services
• Brace matching for group boundaries
• Inspections to detect structural issues
• Navigation bar for quick access to diagram elements
• Structure view for hierarchical overview
• Documentation hover for element information
• Formatting - Auto-format your diagram code

Preview-to-source navigation

Clicking a service, group, or edge in the live preview moves the editor caret to that element’s definition. Navigation from the preview is no longer experimental, so it is on by default for architecture diagrams.

This feature is available with a Studio license. See editions for the full comparison.

Learn More

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