mermaid-generator
✓This skill generates interactive workflow diagrams using the Mermaid JavaScript library for placement in a narrow region of a textbook using an iframe. Use this skill when users request creating flowcharts, process diagrams, workflow visualizations, or decision trees for educational textbooks. The skill creates MicroSim packages with standalone HTML files featuring colorful backgrounds, 16-point fonts, and top-down rendering by default, saved to /docs/sims/ following the MicroSim pattern.
Installation
SKILL.md
Generate simple minimalist but colorful interactive workflow diagrams using Mermaid.js for intelligent textbooks. Creates complete MicroSim packages with standalone HTML files, MkDocs integration, and Dublin Core metadata. Each diagram features colorful node backgrounds, 16-point fonts for optimal readability, and follows the educational MicroSim pattern.
Because this skill is part of the workflow for creation of textbooks using mkdocs, the design goal is to create simple unadorned diagrams without any complex padding, borders or decoration. This is because our focus is to educate, not entertain and show off our ability to do rounded corners and gradient shading.
If the description is incomplete or unclear, prompt the user for additional information:
This skill generates interactive workflow diagrams using the Mermaid JavaScript library for placement in a narrow region of a textbook using an iframe. Use this skill when users request creating flowcharts, process diagrams, workflow visualizations, or decision trees for educational textbooks. The skill creates MicroSim packages with standalone HTML files featuring colorful backgrounds, 16-point fonts, and top-down rendering by default, saved to /docs/sims/ following the MicroSim pattern. Source: vishalsachdev/claude-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/vishalsachdev/claude-skills --skill mermaid-generator- Category
- >_Productivity
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is mermaid-generator?
This skill generates interactive workflow diagrams using the Mermaid JavaScript library for placement in a narrow region of a textbook using an iframe. Use this skill when users request creating flowcharts, process diagrams, workflow visualizations, or decision trees for educational textbooks. The skill creates MicroSim packages with standalone HTML files featuring colorful backgrounds, 16-point fonts, and top-down rendering by default, saved to /docs/sims/ following the MicroSim pattern. Source: vishalsachdev/claude-skills.
How do I install mermaid-generator?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/vishalsachdev/claude-skills --skill mermaid-generator Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/vishalsachdev/claude-skills
Details
- Category
- >_Productivity
- Source
- skills.sh
- First Seen
- 2026-02-01