ReddRadar
Agent skill
mermaid
Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.
Install this agent skill to your Project
npx add-skill https://github.com/iOfficeAI/AionUi/tree/main/src/process/resources/skills/mermaid
SKILL.md
Mermaid Diagram Renderer
Render Mermaid diagrams using beautiful-mermaid library. Supports 5 diagram types with dual output modes.
Quick Start
Dependencies (
beautiful-mermaid) auto-install on first run.
SVG Output (Default)
# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg
# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
ASCII Output (Terminal)
# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii
# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii
Output example:
┌───────┐ ┌─────┐
│ Start │────▶│ End │
└───────┘ └─────┘
Supported Diagrams
| Type | Syntax | Best For |
|---|---|---|
| Flowchart | graph TD/LR |
Processes, decisions |
| Sequence | sequenceDiagram |
API calls, interactions |
| State | stateDiagram-v2 |
State machines |
| Class | classDiagram |
OOP design |
| ER | erDiagram |
Database schemas |
Theming (SVG only)
npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg
Use invalid theme name to see available themes list (e.g., --theme ?)
Resources
scripts/render.ts- Main rendering scriptreferences/syntax.md- Mermaid syntax quick reference
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
iOfficeAI/AionUi
i18n
Internationalization (i18n) workflow and standards for managing translations. Use when: (1) Adding new user-facing text, (2) Creating new components with user-facing text, (3) Reviewing code for i18n compliance, (4) Adding a new translation module.
iOfficeAI/AionUi
pr-automation
PR Automation Orchestrator: poll open PRs, check CI, run review, fix, and merge eligible PRs. Use when: (1) Invoked by daemon via scripts/pr-automation.sh, (2) User says "/pr-automation".
iOfficeAI/AionUi
architecture
Project architecture and file structure conventions for all process types. Use when: (1) Creating new files or modules, (2) Deciding where code should go, (3) Converting single-file components to directories, (4) Reviewing code for structure compliance, (5) Adding new bridges, services, agents, or workers.
iOfficeAI/AionUi
testing
Testing workflow and quality standards for writing and running tests. Use when: (1) Writing new tests, (2) Adding a new feature that needs tests, (3) Modifying logic that has existing tests, (4) Before claiming a task is complete.
iOfficeAI/AionUi
pr-review
PR Code Review (Local): perform a thorough local code review with full project context. Use when: (1) User asks to review a PR, (2) User says "/pr-review", (3) User wants to review code changes before merging.
iOfficeAI/AionUi
bump-version
Didn't find tool you were looking for?