mermaid-studio-extended

name	mermaid-studio-extended
extends	mermaid-studio
description	Extension for the mermaid-studio skill. This file MUST be read together with the parent mermaid-studio SKILL.md. The parent governs Mermaid diagram creation, validation, and rendering. This extension adds a required substitute renderer for multi-row C4 diagrams.
metadata	{"version":"1.0.0","parent_skill":"mermaid-studio","source":"ai-coding-tooling (extended/)"}

mermaid-studio — C4 Renderer Extension

This file extends the mermaid-studio skill. The parent SKILL.md governs diagram creation, validation, and rendering. This extension overrides which script renders C4 diagrams in one specific case.

Use render-c4-fixed.mjs Instead of the Parent's render.mjs

For any C4 diagram whose UpdateLayoutConfig sets c4ShapeInRow or c4BoundaryInRow above 1, render it with scripts/render-c4-fixed.mjs (sibling to this file), not the parent's scripts/render.mjs — the parent's mmdc-based renderer collapses these diagrams to one shape per row regardless of --width.

This skill is installed as a symlink at ~/.claude/skills/mermaid-studio/SKILL.extended.md. Resolve it to find this file's real directory, then run the sibling script from there:

real_dir="$(dirname "$(readlink -f ~/.claude/skills/mermaid-studio/SKILL.extended.md)")"
node "$real_dir/scripts/render-c4-fixed.mjs" \
  --input diagram.mmd --output diagram.png \
  --screen-width 3000 --scale 3

--screen-width (default 3000) must exceed the diagram's total row width; --scale (default 3) is the device-scale-factor for PNG sharpness, matching the parent's -s 3.

The script reuses the parent skill's own puppeteer + mermaid install (~/.claude/skills/mermaid-studio/.deps) — run the parent's scripts/setup.sh first if .deps doesn't exist yet.

All other diagram types, and C4 diagrams without c4ShapeInRow/c4BoundaryInRow above 1, still use the parent's scripts/render.mjs as normal.