Validate and render Mermaid diagrams via mmdc (bundled Puppeteer Chromium). Supports validate and render modes.
This skill uses the mmdc CLI directly to validate Mermaid output (true render check) or render final SVG files. No Node.js wrapper scripts are used.
Whenever the agent outputs any Mermaid code (```mermaid blocks or .mmd files), it MUST run validate before finalizing the response.
If validation fails:
mmdc stderrvalidaterender after validation succeedsBefore running validate/render, always check if mmdc is available.
If mmdc is missing, the agent should attempt to install it automatically:
npm i -g @mermaid-js/mermaid-cli
If automatic install is not possible (network or permissions), clearly report the failure and ask the user to install it manually.
All mmdc executions (validate/render) MUST run outside the Codex sandbox.
Reason: Puppeteer/Chromium fails to launch inside the sandbox, but works in non-sandbox execution.
When running mmdc, explicitly request non-sandbox execution.
Default to a temporary directory for all Mermaid validation/render steps.
Use a temp folder (e.g. via mktemp -d) to store .mmd inputs and .svg outputs, so the user’s project directory is not polluted. Only copy final artifacts back into the project if explicitly requested.
mmdc; success means the diagram renders to SVG.mmdc.Install mermaid-cli with bundled Puppeteer Chromium:
npm i -g @mermaid-js/mermaid-cli
No system Chrome path is required; Puppeteer manages Chromium automatically.
.mmd fileIf your Mermaid exists in Markdown, manually copy the ```mermaid block into a temporary .mmd file:
tmp/input.mmd
mmdc -i tmp/input.mmd -o tmp/output.svg
If mmdc exits 0, the Mermaid is valid.
mmdc -i tmp/input.mmd -o tmp/output.svg
validate (mandatory) by rendering with mmdcrender to output SVG preview0: success10: mmdc missing20: render failed (stderr from mmdc)