mermaid-diagram-authoring

Render centralized Mermaid diagrams from CATALOG.md into SVG for Pandoc output.

Updated Apr 4, 2026
One-click install
npx skills add https://github.com/saintgo7/claude-skills --skill mermaid-diagram-authoring
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-diagram-authoring
Source: https://github.com/saintgo7/claude-skills/tree/main/mermaid-diagram-authoring
Command: npx skills add https://github.com/saintgo7/claude-skills --skill mermaid-diagram-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mmdc, puppeteer, grep, awk, xargs, diff, and includes scripts (resource) components.

What problem does it solve?

This skill solves the pain of writing and maintaining many Mermaid diagrams across bilingual documents without breaking builds or losing consistency.

Core Features & Use Cases

  • Catalog-first Mermaid authoring: Centralizes all diagrams in a single CATALOG.md so the same diagram can be shared across languages.
  • Deterministic extraction and rendering: Extracts diagram blocks into diagram-*.mmd files and renders them to SVG via mmdc.
  • Pandoc Lua insertion with bilingual safety: Automatically injects the correct SVG into the final document and handles caption/ID consistency for both KO/EN books.

Quick Start

Run the installer with the skill name mermaid-diagram-authoring to enable the 5-step Mermaid-to-Pandoc diagram pipeline.

Frequently Asked Questions about mermaid-diagram-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render Mermaid diagrams into SVG for a Pandoc bilingual book workflow?

To render Mermaid diagrams into SVG for Pandoc, this workflow extracts diagram blocks from a centralized CATALOG.md, renders them via mmdc, and uses a Pandoc Lua filter to inject the SVG output while maintaining bilingual caption and ID consistency.

What is the best way to manage Mermaid syntax regressions across high-diagram-count technical writing?

Managing Mermaid syntax regressions in technical writing requires a catalog-driven pipeline that centralizes diagrams in CATALOG.md, extracts them to individual files, and applies CI linting to validate diagram syntax and ensure 1:1 ID consistency.

How does a catalog-driven approach handle bilingual documentation diagrams without losing consistency?

A catalog-driven approach handles bilingual documentation by centralizing all Mermaid diagrams in a single CATALOG.md, allowing the same diagram to be shared across languages while a Pandoc Lua filter manages caption and ID consistency for both KO and EN outputs.

Do I need mmdc and Puppeteer to automate Mermaid SVG rendering in Pandoc?

Yes, you need mmdc and Puppeteer to automate Mermaid SVG rendering, as the pipeline relies on mmdc to convert extracted diagram files into SVG format before injecting them into the final Pandoc document output.

Can I validate Mermaid diagram IDs and syntax during CI linting?

Yes, you can validate Mermaid diagram syntax and check for 1:1 ID consistency during CI linting by using standard text processing tools like grep, awk, xargs, and diff to compare extracted diagrams against the centralized catalog.

Why does my Mermaid diagram break when updating Pandoc output for multiple languages?

Mermaid diagrams break across multiple languages due to syntax regressions and inconsistent diagram IDs, which this pipeline solves by centralizing diagrams in CATALOG.md and applying strict CI linting to validate syntax and enforce 1:1 ID consistency.