The Complete Production SOP: How to Deploy and Run Architecture Diagram Craft (Mermaid/SVG) in Autonomous AI Agents

---
name: "claude-diagram-craft"
description: "Generate clean Mermaid.js sequence diagrams, C4 architecture charts, and crisp SVGs."
triggers:
  - "generate mermaid diagram"
  - "create c4 architecture"
  - "draw sequence diagram"
  - "export svg architecture"
---

# Architecture Diagram Craft (Mermaid/SVG)

Visualizes software architecture, database ERDs, cloud topologies, and state machines with accessible color palettes.

## Instructions and Rules
1. Inspect existing diagrams and repository conventions before generating new assets.
2. Adhere strictly to the workspace directory boundaries (output to docs/diagrams/ or as requested).
3. Validate every Mermaid or SVG chart using headless compilation before completing the task.

{
  "devDependencies": {
    "@mermaid-js/mermaid-cli": "^10.9.0",
    "puppeteer": "^22.0.0"
  },
  "scripts": {
    "lint:diagrams": "mmdc -i docs/diagrams/system-context.mmd -o docs/diagrams/system-context.svg"
  }
}

C4Container
  title Container Diagram for Auth Service Decoupling

  Person(user, "Customer", "End user accessing web and mobile clients")
  System_Boundary(c1, "Core Platform") {
    Container(spa, "Single-Page App", "React, TypeScript", "Delivers platform UI")
    Container(api_gateway, "API Gateway", "Kong", "Routes, rate-limits, and terminates TLS")
    Container(auth_svc, "Auth Service", "Go, Gin", "Issues JWTs and manages user identity")
    ContainerDb(auth_db, "Auth Database", "PostgreSQL", "Stores hashed credentials and audit logs")
  }

  Rel(user, spa, "Uses", "HTTPS")
  Rel(spa, api_gateway, "Sends API calls to", "JSON/HTTPS")
  Rel(api_gateway, auth_svc, "Forwards /auth/*", "gRPC/mTLS")
  Rel(auth_svc, auth_db, "Reads/Writes credentials", "TCP/SSL")

#!/usr/bin/env bash
set -euo pipefail

for file in docs/diagrams/*.mmd; do
  echo "Validating ${file}..."
  npx mmdc -i "$file" -o "${file%.mmd}.svg"
done
echo "All diagrams compiled successfully."