markdown-mermaid-writing

Creates markdown documents with embedded Mermaid diagrams using style guides and templates.

Updated Oct 7, 2022
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill markdown-mermaid-writing-tamagusko
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: markdown-mermaid-writing
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/markdown-mermaid-writing
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill markdown-mermaid-writing-tamagusko

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Scientific and technical documentation often relies on binary images that cannot be diffed in git, edited without regeneration, or parsed by AI tools. This Skill establishes markdown with embedded Mermaid diagrams as the canonical documentation format, enforcing consistent styling, accessibility, and citation rules. ## Core Features & Use Cases - Mermaid diagram standards: Covers 24 diagram types (flowchart, sequence, ER, Gantt, radar, sankey, and more) with per-type exemplars, templates, and parser gotchas such as radar-beta syntax. - Markdown style enforcement: Rules for heading hierarchy, emoji placement, footnote citations, tables, collapsible sections, and GitHub light/dark mode compatibility. - Nine document templates: Ready-to-use templates for ADRs, issues, kanban boards, how-to guides, research papers, status reports, and more. - Use Case: When writing an architecture decision record, start from the decision_record template, add a Mermaid flowchart comparing current and future state with accTitle/accDescr accessibility annotations, and commit the .md file as the source of truth. ## Quick Start Ask the AI to write a project status report in markdown with a Mermaid Gantt chart of the timeline, following this skill's style guide and templates.

Frequently Asked Questions about markdown-mermaid-writing

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

FAQPage Schema
How do I add Mermaid diagrams to markdown on GitHub?

Wrap Mermaid syntax in a fenced code block with the mermaid language identifier inside any .md file. GitHub renders it natively in issues, PRs, and wikis. Add accTitle and accDescr lines for screen reader accessibility.

Which Mermaid diagram type should I use for my content?

Match the diagram type to the content: flowcharts for decision logic, sequence diagrams for service interactions, ER diagrams for data models, Gantt for timelines, and radar-beta for multi-dimensional comparisons. Avoid defaulting to flowcharts for everything.

Why does my Mermaid radar chart fail to render?

The bare radar keyword does not exist; use radar-beta instead. Define dimensions with axis id["Label"] and data with curve id["Label"]{values}, not x-axis or colon syntax. Radar-beta also does not support accTitle or accDescr.

Do Mermaid diagrams work in GitHub dark mode?

Yes, if you avoid %%{init} theme directives and inline style attributes, which break dark mode. Use classDef with explicit fill, stroke, and text color values from a tested palette, and let GitHub auto-theme the rest.

When should I use an image instead of a Mermaid diagram?

Use images only for content Mermaid cannot express, such as UI screenshots, photographs, or scatter plots with real data. For any structural or relational content, Mermaid stays the source of truth because it diffs cleanly in git.