--- name: diagram-render description: Diagram Render — SKILL_DIAGRAM_RENDER_001 source: platform/sdlc/13_skills/active/SKILL_DIAGRAM_RENDER_001.yaml canonical_id: SKILL_DIAGRAM_RENDER_001 generated: 2026-05-27 runtime: codex --- > **Runtime projection of `SKILL_DIAGRAM_RENDER_001`.** Edit the canonical, not this file. > Source of truth: `platform/sdlc/13_skills/active/SKILL_DIAGRAM_RENDER_001.playbook.md` # Playbook: SKILL_DIAGRAM_RENDER_001 — Diagram Render ## Skill ID SKILL_DIAGRAM_RENDER_001 ## Version 1.0.0 ## Purpose Validate `.mmd` Mermaid diagram syntax and render each diagram to SVG (and optionally PNG) in the `04_architecture/diagrams/rendered/` output directory. Also updates the diagram registry to reflect render status and timestamps. --- ## Inputs | Field | Type | Required | Default | Description | |--------------|--------|----------|-----------------------------------------------|------------------------------------| | `target_dir` | path | no | `atlas/04_architecture/diagrams/source/` | Directory to scan for `.mmd` files | | `output_dir` | path | no | `atlas/04_architecture/diagrams/rendered/` | Directory to write SVG/PNG output | | `mode` | enum | no | `render` | `check` (validate only) or `render` (validate + render) | | `file` | path | no | — | If set, process only this single `.mmd` file | --- ## Prerequisites ### Check for mermaid-cli ```bash npx --yes @mermaid-js/mermaid-cli --version ``` If the command fails or returns an error, install globally: ```bash npm install -g @mermaid-js/mermaid-cli ``` Verify installation: ```bash mmdc --version ``` **OneDrive path note:** All paths passed to `mmdc` MUST be quoted with double-quotes. OneDrive paths contain spaces (e.g. `OneDrive-Personal`) that will break unquoted shell arguments. Always use: ```bash mmdc -i "" -o "" ``` --- ## Step-by-Step Execution ### Step 1: Enumerate .mmd Files If `file` input is provided, process only that file. Otherwise: ```bash find "" -name "*.mmd" -type f | sort ``` Build a list of absolute paths. Each path becomes one render job. ### Step 2: Ensure Output Directory Exists ```bash mkdir -p "" ``` Preserve the source sub-directory structure in the output directory. Example: if source is `source/architecture/genesys/genesys_system_context.mmd`, output is `rendered/architecture/genesys/genesys_system_context.svg`. ```bash mkdir -p "/architecture//" ``` ### Step 3: Validate Each .mmd File (--check mode) For each `.mmd` file, run a syntax-only check by attempting a dry render to `/dev/null`: ```bash mmdc -i ".mmd" -o "/tmp/validate_check.svg" 2>&1 ``` Capture stdout and stderr. A passing file produces no output or only informational lines. A failing file produces error output containing `Error` or `ParseError`. **Valid SVG check:** After render, verify the output is not an error SVG: ```bash grep -c ".svg" # must return 1 (exactly one

diagram-render

Install this skill

Comments