# Dallay Cvix C4 Diagrams

> C4 Diagrams Skill

- Skill: `tomevault-io/dallay-cvix-c4-diagrams` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dallay-cvix-c4-diagrams`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dallay-cvix-c4-diagrams/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dallay-cvix-c4-diagrams

---

# C4 Diagrams Skill

## When to Use

- When you need to generate or update system/containers/components/context diagrams following the C4 model.
- Trigger: changes under `docs/architecture/diagrams` or creating new architecture artifacts.

## Critical Patterns

- Keep diagrams as source files in `docs/architecture/diagrams` using either Mermaid (.mmd/.mmdx) or PlantUML (.puml).
- Prefer small, focused diagrams per file (one diagram per file). Don't bloat a single file with all C4 levels.
- Use consistent IDs and naming for elements across diagrams (SYSTEM_xxx, CONTAINER_xxx, COMP_xxx).
- Version diagrams in git. The skill MUST not modify files without creating clear diffs and a suggested commit message.
- Always provide both Mermaid and PlantUML variants when a diagram is shared with external stakeholders who may prefer one renderer.

## Commands

```bash
# Validate Mermaid syntax (requires mmdc installed)
mmdc -i docs/architecture/diagrams/example.mmd -o /tmp/example.png

# Render PlantUML (requires plantuml.jar or plantuml binary)
plantuml -tpng docs/architecture/diagrams/example.puml

# Quick lint: search for .mmd/.puml files changed by git
git diff --name-only --diff-filter=ACMRTUXB HEAD~1..HEAD | rg "docs/architecture/diagrams/.*\.(mmd|puml)"
```

## Templates (assets)

- assets/mermaid-template.mmd -> minimal C4-style Mermaid snippet
- assets/plantuml-template.puml -> PlantUML using C4-PlantUML macros
- assets/README.md -> instructions to render locally

## Code Examples

Mermaid (minimal C4-like context diagram):

```mmd
%% assets/mermaid-template.mmd
flowchart TB
  %% Context - System and external actors
  actor(User):::person
  subgraph SYSTEM [My System]
    APP["Web App"]
  end
  User --> APP

  classDef person fill:#f9f,stroke:#333,stroke-width:1px
```

PlantUML (using C4-PlantUML):

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
Person(user, "User")
System(webapp, "Web App")
Rel(user, webapp, "uses")
@enduml
```

## Rules for the Agent

- When asked to update diagrams, propose both Mermaid and PlantUML outputs when possible.
- Validate diagram syntax and show render command output or error.
- When creating new diagram files, place them under `docs/architecture/diagrams/<level>/<name>.<ext>` where `<level>` is context|container|component|code.
- Add a short header comment in each generated file with: generation timestamp, generator name (`c4-diagrams skill`), and git SHA (if available).

## Resources

- Templates: `assets/`
- Docs location: `docs/architecture/diagrams/`

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dallay) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->