원클릭으로
diagrammo
Inspect and render Mermaid blocks in Markdown as themed SVG output with the packaged ahm-diagrammo CLI.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Inspect and render Mermaid blocks in Markdown as themed SVG output with the packaged ahm-diagrammo CLI.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | diagrammo |
| description | Inspect and render Mermaid blocks in Markdown as themed SVG output with the packaged ahm-diagrammo CLI. |
Use the packaged CLI. Do not reimplement parsing, renderer selection, layout, theming, or SVG generation.
npx --yes ahm-diagrammo "$INPUT" --listnpx --yes ahm-diagrammo "$INPUT" --out "$OUTPUT" --strict$OUTPUT for .svg files, confirm each is non-empty, and report the emitted files.Preserve the user's Markdown. Surface CLI diagnostics and non-zero exits rather than masking
them. --sync-markdown is the sole, explicit opt-in exception: only invoke it when the user asks
to check in an editable-source-plus-rendered-SVG Markdown file, never as a default action. Its
first generated SVG filename is stable for that managed block's lifetime — do not hand-edit its
<!-- diagrammo:sync ... --> markers; renaming a heading or a fence's title=/name= later is
safe and never renames the file. The Mermaid source itself lives fully hidden (not merely
collapsed) inside a <!-- diagrammo:source ... --> comment, with every literal --> escaped to
-->. Editing it directly is safe — write real, unescaped Mermaid (a raw --> is fine); the
next --sync-markdown run decodes, re-renders, and re-escapes it. Never hand-type the literal
--> token into a fence — the CLI rejects a fence that already contains it, since decoding
would then be ambiguous.
Author-controlled options live inside the fence as %%| key: value lines (also settable via
fence-info key=value or a diagrammo: frontmatter block). Common keys: theme, title,
subtitle, lanes, legend, alt, and laneLabels.
To make a wide swimlane narrower, set %%| laneLabels: false. It hides the right-hand lane-label
text and reclaims that gutter — nothing else moves: node placement, edge routing, edge state
colors, lane bands, and SVG height are all unchanged. There is no width-wrapping/maxWidth knob;
narrowing is achieved only by reclaiming the label gutter, never by wrapping lanes onto extra rows.
laneLabels defaults to true (labels shown); a non-boolean value warns and falls back to true.