markdown-mermaid-writing

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

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/ricfulop/cba-agentic-engineering-bootstrap --skill markdown-mermaid-writing-ricfulop
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: markdown-mermaid-writing
Source: https://github.com/ricfulop/cba-agentic-engineering-bootstrap/tree/main/skills/markdown-mermaid-writing
Command: npx skills add https://github.com/ricfulop/cba-agentic-engineering-bootstrap --skill markdown-mermaid-writing-ricfulop

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Scientific and technical documentation often ends up as inconsistent prose with binary images that cannot be diffed, edited, or parsed by AI tools. This Skill establishes markdown with embedded Mermaid diagrams as the canonical documentation format, so every document is version-controllable, renders natively on GitHub, and stays editable as plain text. ## Core Features & Use Cases - Style enforcement: Applies a full markdown style guide (heading hierarchy, footnote citations, emoji rules, tables, collapsible sections) and a Mermaid style guide (accessibility via accTitle/accDescr, approved color classes, theme-neutral rendering). - 24 diagram type references: Provides per-type guides with exemplars and copy-paste templates for flowcharts, sequence diagrams, ER diagrams, Gantt charts, radar charts, C4, Sankey, and more. - 9 document templates: Ships ready-to-use templates for ADRs, how-to guides, issues, kanban boards, research papers, status reports, and presentations. - Use Case: When writing a research report, start from the research paper template, add a Mermaid flowchart for the methodology and a Gantt chart for the timeline, then commit the .md file as the source of truth. ## Quick Start Ask the AI to write a project status report as a markdown file with a Mermaid flowchart of the workflow, following this skill's style guides 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 documentation?

Embed a fenced code block with the mermaid language tag directly in your .md file, placing it inline with the related text. Pick the diagram type matching your content (flowchart for processes, sequence for interactions, ER for data models) and include accTitle and accDescr for accessibility.

Which Mermaid diagram type should I use for my content?

Match the type to the content: flowcharts for decision logic, sequence diagrams for service interactions, Gantt for project timelines, ER for data models, mindmaps for concept hierarchies, and radar for multi-dimensional comparisons. Avoid defaulting to flowcharts when a more specific type exists.

Why does my Mermaid diagram break in GitHub dark mode?

Inline style directives and %%{init}%% theme overrides break GitHub's automatic theme switching. Use classDef with the approved color palette (including explicit text color) and let GitHub auto-detect the theme instead.

What is the correct syntax for Mermaid radar charts?

Use radar-beta (not radar), define dimensions with axis id["Label"], and data series with curve id["Label"]{values}. Radar charts do not support accTitle/accDescr, so add a descriptive italic paragraph above the diagram instead.

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 complex data visualizations with real data. Structural and relational content should stay as Mermaid text so it diffs cleanly in git and remains editable.