How do I install the Diagramar skill?

Run npx skillmds@latest add talhamah56/diagramar in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Diagramar safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Diagramar?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Diagramar free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Diagramar?

talhaMah56 (@talhamah56) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Diagramar by talhamah56 — Agent Skill

Name: Diagramar
Rating: 4.5 (4 reviews)
Author: talhaMah56

Diagramar

Use in discovery to draw the HIGH-LEVEL architecture in Mermaid — context diagram (C4 L1), containers (C4 L2), and the bounded contexts map (DDD). It reads vision, context-map, design, and assessment, and generates/updates docs/architecture/diagrams.md. It keeps a high level, with no implementation detail. Trigger with /diagramar.

talhaMah56 Updated Sep 22, 2026

File contents

Translation note: Originally authored in Portuguese (pt-BR) by Igor Uehara (igoruehara/spec-driven, MIT). Translated to English by this hub to keep the repository language consistent. Original content unchanged in meaning; see the upstream repo for the pt-BR source.

Skill: Diagram architecture (Mermaid, high level)

Generates the architecture diagrams in Mermaid (they render on GitHub and in Claude Code) from the discovery artifacts. Keep it high level: actors, systems, containers, and contexts — never classes, tables, or implementation detail (that is the scope of the feature's design.md).

Inputs (pull only what exists and cite the source)

docs/product/vision.md — actors/personas and the system's purpose.
docs/architecture/context-map.md — bounded contexts and relationships (DDD).
specs/*/design.md — containers, services, and integrations.
docs/architecture/assessment.md — as-is, in brownfield.
Gaps → ask (AskUserQuestion): external actors, neighboring systems, the main containers (UI/services/data/queues), and the critical journey to illustrate.

Diagrams (high level, aligned with C4 + DDD)

System context (C4 L1): the system at the center + personas + external systems.
Containers (C4 L2): apps/services, data, queues, and how they talk.
Bounded contexts map (DDD): contexts and relationship patterns (ACL, Customer/Supplier, Conformist, Shared Kernel).
(optional) Key flow: a critical journey in a sequenceDiagram.

Use flowchart (renders everywhere) or Mermaid's native C4 diagrams (C4Context, C4Container) if the renderer supports it. Labels in the ubiquitous language of glossary.md.

Output

Write/update docs/architecture/diagrams.md (already exists as a placeholder; keep the frontmatter alwaysApply: false). Each diagram in a ```mermaid block, with a title and 1 line of context.
Ensure the back-link in context-map.md. Regenerate when the architecture changes — an outdated diagram misleads more than it helps.

Rules

High level only. Asked for class/table detail? Say it's the scope of design.md.
Validate the syntax before delivering — run the deterministic gate (don't trust the eye only):
```
node scripts/validate-mermaid.mjs .
```
It catches empty blocks, missing/unknown diagram types, and unbalanced quotes/delimiters. Fix the errors before saving; it's the same gate that runs in CI (esteira.yml).
Do not invent components that aren't in the inputs — ask (see knowledge verification in CLAUDE.md).

---name: diagramardescription: Use in discovery to draw the HIGH-LEVEL architecture in Mermaid — context diagram (C4 L1), containers (C4 L2), and the bounded contexts map (DDD). It reads vision, context-map, design, and assessment, and generates/updates docs/architecture/diagrams.md. It keeps a high level, with no implementation detail. Trigger with /diagramar.---> **Translation note:** Originally authored in Portuguese (pt-BR) by Igor Uehara ([igoruehara/spec-driven](https://github.com/igoruehara/spec-driven), MIT). Translated to English by this hub to keep the repository language consistent. Original content unchanged in meaning; see the upstream repo for the pt-BR source.# Skill: Diagram architecture (Mermaid, high level)Generates the architecture diagrams in **Mermaid** (they render on GitHub and in Claude Code) from thediscovery artifacts. Keep it **high level**: actors, systems, containers, and contexts — never classes,tables, or implementation detail (that is the scope of the feature's `design.md`).## Inputs (pull only what exists and cite the source)- `docs/product/vision.md` — actors/personas and the system's purpose.- `docs/architecture/context-map.md` — bounded contexts and relationships (DDD).- `specs/*/design.md` — containers, services, and integrations.- `docs/architecture/assessment.md` — as-is, in brownfield.- **Gaps** → ask (`AskUserQuestion`): external actors, neighboring systems, the main containers (UI/services/data/queues), and the critical journey to illustrate.## Diagrams (high level, aligned with C4 + DDD)1. **System context (C4 L1):** the system at the center + personas + external systems.2. **Containers (C4 L2):** apps/services, data, queues, and how they talk.3. **Bounded contexts map (DDD):** contexts and relationship patterns (ACL, Customer/Supplier, Conformist, Shared Kernel).4. *(optional)* **Key flow:** a critical journey in a `sequenceDiagram`.> Use `flowchart` (renders everywhere) or Mermaid's native C4 diagrams (`C4Context`,> `C4Container`) if the renderer supports it. Labels in the **ubiquitous language** of `glossary.md`.## Output- Write/update `docs/architecture/diagrams.md` (already exists as a placeholder; keep the frontmatter `alwaysApply: false`). Each diagram in a ` ```mermaid ` block, with a title and 1 line of context.- Ensure the back-link in `context-map.md`. **Regenerate when the architecture changes** — an outdated diagram misleads more than it helps.## Rules- **High level only.** Asked for class/table detail? Say it's the scope of `design.md`.- **Validate the syntax before delivering** — run the deterministic gate (don't trust the eye only): ``` node scripts/validate-mermaid.mjs . ``` It catches empty blocks, missing/unknown diagram types, and unbalanced quotes/delimiters. Fix the errors before saving; it's the same gate that runs in CI (`esteira.yml`).- Do not invent components that aren't in the inputs — ask (see knowledge verification in `CLAUDE.md`).

Frequently asked questions