Agent skill

C4 Diagramming

by magnus919 in magnus919/agent-skills

Create and review C4 software-architecture diagrams using Mermaid or Structurizr.

MITAuto-check passedDevelopment

Install C4 Diagramming

skills CLI
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install magnus919/agent-skills c4-diagramming --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/c4-diagramming .claude/skills/c4-diagramming && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
c4-diagramming
GitHub stars
115
Token cost
~2k tokens
SKILL.md length
789 words
Files
8 (incl. references)
Skills in repo
131
Repo updated
First seen
Licence
MIT

At a glance

Create and review C4 software-architecture diagrams using Mermaid or Structurizr.

  • Teams need a communication-ready system context
  • SKILL.md covers C4-to-Pyramid Mapping, Communication Gate, Review Evidence and Authoring Formats, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Code-level view

What it does

C4 Diagramming is an agent skill from magnus919/agent-skills. Create and review C4 software-architecture diagrams using Mermaid or Structurizr. Use when teams need a communication-ready system context, container, component, or code-level view, including audience, narrative, hierarchy, labels, legends, accessibility, and uncertainty. Do not use for Mermaid syntax/rendering work without C4 modeling, architecture decisions, or full accessibility conformance reviews.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `README.md`, `evals/evals.json` and `references/architecture-as-code-ecosystem.md`). Compatibility notes: Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.

It sits in Development, covering Diagrams, Software architecture and Accessibility. It works with Mermaid. The repository describes itself as: Curated collection of AI agent skills for Hermes and other agent frameworks. The licence is MIT.

When your agent uses it

  • Teams need a communication-ready system context
  • Code-level view
  • Including audience
  • Mermaid syntax/rendering work without C4 modeling

Example prompts

  • “/c4-diagramming”

Requirements

  • Docker
  • Compatibility (from SKILL.md): Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.

What it can do on your machine

Read from SKILL.md and the folder at commit 22b4723. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com
    • c4model.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.

    From compatibility in the SKILL.md frontmatter.

Context cost

C4 Diagramming loads about 2k tokens when it runs, and up to ~8.9k if it reads all its reference files. Until then it costs about 105 tokens; SKILL.md has 789 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~105
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from magnus919/agent-skills at commit 22b4723, republished under its MIT licence (© magnus919). 789 words, ~1,971 tokens.

Download SKILL.mdSave it as .claude/skills/c4-diagramming/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
c4-diagramming
description
Create and review C4 software-architecture diagrams using Mermaid or Structurizr. Use when teams need a communication-ready system context, container, component, or code-level view, including audience, narrative, hierarchy, labels, legends, accessibility, and uncertainty. Do not use for Mermaid syntax/rendering work without C4 modeling, architecture decisions, or full accessibility conformance reviews.
compatibility
Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.
license
MIT
metadata.source_repo
https://github.com/magnus919/hermes-profiles
metadata.source_commit
867a555

C4 Diagramming

C4 Model for structural architecture visualization. Produces diagrams at four zoom levels, mapped into the artifact pyramid.

C4-to-Pyramid Mapping

C4 LevelPyramid LayerPath
Level 1: System ContextL1 (Summary)01-summary/system-context.md
Level 2: ContainerL2 (Analysis)02-analysis/structural-views/container.md
Level 3: ComponentL2 (Analysis)02-analysis/structural-views/components.md
Level 4: CodeL3 (Dossiers)03-dossiers/code-level-detail.md

C4 is the cleanest structural fit — its four-level hierarchy maps to the three pyramid layers with almost no translation, and Levels 2-3 both resolve to separate L2 analysis files.

Communication Gate

Before choosing notation or polishing layout, state the audience and the job the reader must complete. Select one C4 level that answers that job; do not mix system context, container, component, and code claims merely to fill a canvas. Keep the abstraction level, element vocabulary, boundary treatment, and relationship meaning consistent within a view. A structurally valid C4 model can still be the wrong communication artifact if it asks the reader to infer the purpose, mixes levels, hides important paths, or overwhelms the intended reader.

Load references/technical-diagram-communication.md when creating, revising, or reviewing a diagram for a real audience. Use its review record to check narrative/read order, visual hierarchy, labels and legends, signal-to-noise, color-independent meaning, accessibility handoff, uncertainty, and review evidence. Full accessibility conformance remains owned by web-accessibility; architecture decisions remain owned by software-architecture.

Review Evidence

Record the intended audience and question, C4 level and scope, key claim, known uncertainty, target renderer, and an accessible text or tabular fallback. Review both the source model and the rendered artifact. A passing syntax/model validator proves structural validity only; it does not prove that the diagram communicates the intended claim.

Authoring Formats

Mermaid (Default for Quick Diagrams)

Use when you need a single diagram embedded in markdown. See the GitHub Rendering Constraint section below for C4-in-Mermaid compatibility notes.

Structurizr DSL is the C4 model's reference "models as code" implementation, created by Simon Brown. Define the entire architecture model in a single DSL file; all 4 C4 levels are generated from it. This ensures structural consistency across diagrams that hand-written Mermaid cannot guarantee.

workspace {
    model {
        user = person "Customer"
        system = softwareSystem "Your System" {
            webapp = container "Web Application" "TypeScript, React"
            api = container "API" "Go"
            db = container "Database" "PostgreSQL"
            user -> webapp "Uses"
            webapp -> api "Makes API calls"
            api -> db "Reads/writes"
        }
    }
    views {
        systemContext system { include * autolayout lr }
        container system { include * autolayout lr }
        component api { include * autolayout lr }
        theme default
    }
}

Key capabilities:

  • !adrs docs/adr — imports Architecture Decision Records (adr-tools, MADR, log4brains) into the workspace, rendered alongside C4 diagrams
  • !docs docs/arc42 — imports arc42 documentation as Markdown/AsciiDoc
  • Structurizr Lite (Docker) — local preview at http://localhost:8081
  • CI commands: validate, inspect, export (PlantUML, Mermaid, static site)

Full reference in references/architecture-as-code-ecosystem.md — tool comparison, DSL cookbook, C4-PlantUML alternative, and the converged repo convention.

Contents

  • references/c4-to-pyramid-mapping.md — context→L1, container/component→L2, code→L3 (Mermaid + Structurizr DSL paths)
  • c4-to-flowchart.md — companion Mermaid conversion patterns for GitHub-compatible flowcharts
  • references/architecture-as-code-ecosystem.md — Structurizr DSL, C4-PlantUML, docToolChain, converged repo convention, tool comparison table
  • references/ci-pipeline-templates.md — GitHub Actions, GitLab CI, ForgeJo (Gitea Actions, Woodpecker) pipeline templates for Structurizr validation, export, deploy
Show full SKILL.md (343 more words)Show less

GitHub Rendering Constraint

GitHub's built-in Mermaid renderer does not bundle the C4 plugin (@mermaid-js/mermaid). Any ````mermaidblock usingC4Context, C4Container, or C4Component` syntax renders as raw code rather than a diagram on GitHub. This affects issues, PR descriptions, discussion comments, and markdown files.

Workaround: Convert C4 diagrams to standard flowchart syntax before embedding in GitHub markdown:

  • Person() → [rect] node with label
  • System() / System_Ext() → [rect] inside or outside subgraphs
  • Container() → [rect with tech stack label]`
  • Db() → [(cylinder shape)]
  • System_Boundary{} / Container_Boundary{} → subgraph ... end
  • Rel() → -- label --> or -.->
  • Drop UpdateLayoutConfig() — use flowchart LR or TB directive instead

For the full conversion table with worked examples, load c4-to-flowchart.md from the companion mermaid-diagrams skill when it is available.

.mmd files in a DIAGRAMS/ directory must also use standard flowchart syntax if they need to render via mmdc or on GitHub. Files using C4-plugin syntax can only render in tools that bundle the plugin (e.g., Mermaid Live Editor, mmdc with C4 extension config). If you commit .mmd files with C4 syntax to a repo, GitHub's file preview will show them as raw text — convert them to standard syntax or render them to PNG first.

Feature Request Filed

A GitHub Community feature request to bundle the C4 mermaid plugin was filed at https://github.com/orgs/community/discussions/197898 (closed — requires submission through the web UI with the Apps, API and Webhooks discussion template). If this gets implemented, the flowchart conversions below would no longer be necessary for GitHub rendering.

Canonical Reference

Portability

This skill is intentionally host-neutral. Use your agent's normal mechanisms to load the references, templates, and scripts listed here. Do not assume a particular profile system, task orchestrator, memory service, or response-handoff format.

When not to use

  • Use mermaid-diagrams for Mermaid grammar, renderer compatibility, layout, and export troubleshooting that does not require C4 level/model decisions.
  • Use software-architecture for architecture drivers, tradeoffs, decisions, and fitness evidence; this skill visualizes those decisions rather than owning them.
  • Use web-accessibility for complete WCAG/ARIA conformance work and assistive-technology evidence; this skill contributes diagram-specific accessibility checks and fallbacks.

© magnus919, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in c4-diagramming of magnus919/agent-skills.

  • SKILL.md
  • README.md
  • evals/evals.json
  • references/architecture-as-code-ecosystem.md
  • references/c4-to-pyramid-mapping.md
  • references/ci-pipeline-templates.md
  • references/source-index.md
  • references/technical-diagram-communication.md

Open the folder on GitHubat commit 22b4723

Compare with similar skills

C4 Diagramming next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

C4 Diagramming compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
C4 Diagramming this skillmagnus919/agent-skills115—~2kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT
GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram18k—~427Automated safety check: PassMIT
Code Graph Mermaid Diagramstrailofbits/skills7.5k—~1.7kAutomated safety check: PassCC-BY-SA-4.0
Mermaid Diagramsjjmartres/opencode1336 repos~1.9kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed
  • GitDiagram Repository Overview

    ahmedkhaleel2004/gitdiagram

    Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.

    18k GitHub stars~427 tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.5k GitHub stars~1.7k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Mermaid Diagrams

    jjmartres/opencode

    Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.

    133 GitHub starsUsed in 6 repos~1.9k tokens
    DevelopmentAuto-check passed
  • GitDiagram Repo Architecture

    ahmedkhaleel2004/gitdiagram

    Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.

    18k GitHub stars~429 tokensUpdated yesterday
    DevelopmentAuto-check passed

More from magnus919/agent-skills

All 131 skills in this repo
  • Artifact Pyramids

    magnus919/agent-skills

    Organize durable agent research outputs as summaries, analysis, and evidence dossiers.

    119 GitHub stars~2.7k tokensUpdated today
    Auto-check passed
  • Ascii City Engine

    magnus919/agent-skills

    Build portable, first-person colored ASCII city engines and small GIS-derived city packs.

    119 GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Color Management

    magnus919/agent-skills

    Manage color workflows with ICC profiles, working spaces, gamut mapping, and color science.

    119 GitHub stars~2.6k tokensUpdated today
    Auto-check: notes
  • Data Scientist

    magnus919/agent-skills

    A skill your agent uses for PhD-level expertise in data science, statistics, and machine learning: rigorous statistical analysis, experimental design, causal inference, advanced modeling, research…

    119 GitHub stars~4.1k tokensUpdated today
    Auto-check passed
  • Docker Compose

    magnus919/agent-skills

    Use Docker Compose to define, run, debug, and harden multi-container applications.

    119 GitHub stars~2k tokensUpdated today
    Auto-check: notes
  • Fpga Development

    magnus919/agent-skills

    Design, review, simulate, and verify FPGA logic using explicit RTL contracts, clock and reset models, CDC analysis, timing constraints, and reproducible implementation evidence.

    119 GitHub stars~2.7k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about C4 Diagramming

What does C4 Diagramming do?

Create and review C4 software-architecture diagrams using Mermaid or Structurizr. C4 Diagramming is an agent skill from magnus919/agent-skills. Create and review C4 software-architecture diagrams using Mermaid or Structurizr.

When should I use C4 Diagramming?

C4 Diagramming fits situations like: teams need a communication-ready system context; code-level view; including audience; mermaid syntax/rendering work without C4 modeling.

How do I install C4 Diagramming in Claude Code?

Run `npx skills add magnus919/agent-skills --skill c4-diagramming -a claude-code`. Or copy the skill folder (c4-diagramming in magnus919/agent-skills) into .claude/skills/c4-diagramming in your project. Claude Code loads it when a task matches its description.

How do I install C4 Diagramming in Codex?

Run `npx skills add magnus919/agent-skills --skill c4-diagramming -a codex`. Or copy the skill folder (c4-diagramming in magnus919/agent-skills) into .agents/skills/c4-diagramming in your project. Codex loads it when a task matches its description.

Can I use C4 Diagramming in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add magnus919/agent-skills --skill c4-diagramming -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/c4-diagramming, .gemini/skills/c4-diagramming, .github/skills/c4-diagramming and .opencode/skills/c4-diagramming in your project.

What does C4 Diagramming need to run?

SKILL.md names no scripts, command-line tools or credentials: C4 Diagramming is instructions for the agent only. Our summary lists: Docker. Compatibility (from SKILL.md): Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams..

Does C4 Diagramming access the network?

SKILL.md names 2 domains. As links in the text: github.com and c4model.com. This is read from the text; nothing was executed.

Is C4 Diagramming safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does C4 Diagramming use?

C4 Diagramming is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does C4 Diagramming use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7k tokens, read only when the agent opens those files.

What are the alternatives to C4 Diagramming?

Skills that share tags, products or a category with C4 Diagramming: Archify Diagrams (tt-a1i/archify, 82k stars), Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars), GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars) and Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains C4 Diagramming?

magnus919 (a GitHub user) maintains it in magnus919/agent-skills, which has 115 GitHub stars. The repository holds 131 skills in this directory. The repository was last updated on October 10, 2026.

Source: magnus919/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.