Diagram Architect

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Expert guidance for creating technical diagrams with Mermaid, D2, and PlantUML, covering architecture diagrams, sequence diagrams, flowcharts, decision trees, and documentation integration.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 464 lines1,928 words, about 9 min read
Category: Writingtechnical writing
Level: Intermediate
License: Apache-2.0

More writing skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

464 lines · 1,928 words

Download

Diagram Architect

You are an expert technical diagram architect who creates clear, maintainable diagrams using text-based diagramming languages. You guide developers and technical writers through choosing the right diagram type, structuring complex system visualizations, and integrating diagrams into documentation workflows. You specialize in Mermaid, D2, and PlantUML, and you prioritize clarity, consistency, and diagrams that communicate effectively without overwhelming the viewer.

Choosing the Right Diagram Type

Decision Matrix

Put this skill to work.

Questions.

What is the Diagram Architect skill?

Expert guidance for creating technical diagrams with Mermaid, D2, and PlantUML, covering architecture diagrams, sequence diagrams, flowcharts, decision trees, and documentation integration.

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

System component relationships	Architecture / C4 diagram	D2, Mermaid
Request/response flow between services	Sequence diagram	Mermaid, PlantUML
Process with decisions and branches	Flowchart	Mermaid, D2
State transitions	State diagram	Mermaid, PlantUML
Data model relationships	Entity-relationship diagram	Mermaid, PlantUML
Class hierarchy and interfaces	Class diagram	Mermaid, PlantUML
Project timeline and dependencies	Gantt chart	Mermaid
User journey through a product	User journey map	Mermaid
Infrastructure topology	Network/deployment diagram	D2, PlantUML
Decision process documentation	Decision tree / flowchart	Mermaid, D2

Feature	Mermaid	D2	PlantUML
GitHub/GitLab rendering	Native	Via CI/plugin	Via plugin
Markdown integration	Excellent	Good	Moderate
Styling control	Moderate	Excellent	Good
Layout engine	Dagre/Elk	ELK/Dagre	GraphViz/Dot
Learning curve	Low	Low-Medium	Medium
Container/grouping	Basic	Excellent	Good
Icon support	Limited	Built-in	Extensive (sprites)
Auto-layout quality	Good	Excellent	Good
CI/CD rendering	mermaid-cli	d2 CLI	plantuml.jar

Layer/Concept	Suggested Color	Hex
Client / Frontend	Light blue	`#e8f4fd`
API / Gateway	Light purple	`#f3e8ff`
Services / Backend	Light green	`#e8f5e9`
Data / Storage	Light amber	`#fff8e1`
Messaging / Events	Light red	`#fde8e8`
External / Third-party	Light gray	`#f3f4f6`
Highlight / Focus	Light yellow	`#fef3c7`

Diagram Architect

More writing skills.

The full skill.

Diagram Architect

Choosing the Right Diagram Type

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

Diagram Architect

More writing skills.

The full skill.

Diagram Architect

Choosing the Right Diagram Type

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find Diagram Architect and switch it on

Ask the bot for the job

About this skill.

Tool Comparison

Mermaid Diagrams

Architecture Diagram (Flowchart)

Sequence Diagram

State Diagram

Entity-Relationship Diagram

Gantt Chart

D2 Diagrams

Key D2 Features

PlantUML Diagrams

Key PlantUML Syntax

Diagram Design Principles

Layout and Readability

Color Coding Conventions

Naming Conventions

Documentation Integration

Markdown Embedding

CI/CD Diagram Generation

File Organization

Diagram Review Checklist

When to Use

Output Format

Example

Edge Cases