Menu
Create and update Mermaid diagrams with proper file naming, automated SVG generation, and best practices for visual documentation.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Helps users connect and use a service in Rebel when it isn't already in the built-in connector catalog. Acts as an expert advisor — runs the full build-vs-buy check (catalog, MCP Registry, community) before scaffolding a custom MCP server and guiding research, implementation, security review, and contribution.
Add, update, or remove connectors (MCP servers) in Rebel. Searches the built-in connector catalog first before suggesting custom builds. Handles setup, configuration, and security review for community connectors.
Capture citable sources (meetings, documents, files, media, web content) as structured files in memory/sources/ with provenance metadata for traceability.
Rules for writing error messages, toasts, banners, and recovery copy in Rebel's voice — dry, calm, helpful, and never apologetic. Use whenever you add or rewrite any user-facing error string.
Guides users through adding new tools or capabilities to an existing connector (MCP server). Handles eligibility, workspace setup, connector research, implementation via Software Engineer workflow, local testing, and PR submission with an extension-specific template.
Help users celebrate impactful wins and surface important learnings by analyzing their recent communications and activities.
| name | generate-mermaid-diagram |
| description | Create and update Mermaid diagrams with proper file naming, automated SVG generation, and best practices for visual documentation. |
| last_updated | "2025-10-26T00:00:00.000Z" |
| agent_type | either |
| dependencies | [] |
Quick instructions for creating and updating Mermaid diagrams in your project.
Install Mermaid CLI if not already available:
npm install -g @mermaid-js/mermaid-cli
For detailed configuration options, see the Mermaid CLI documentation.
.mermaid files in help/diagrams/ (or your preferred documentation directory)Mermaid diagrams should follow this naming format: yyMMdd[letter]_description_in_normal_case.mermaid
date +%y%m%d (add letter suffix manually if multiple diagrams per day)npx tsx src/ts/cli/sequential-datetime-prefix.ts for automated sequential prefixes250701a_flow_iterative_heading_generation.mermaid250701b_architecture_glossary_complete.mermaid250701c_diagram_tools_flow_ToC.mermaidAlways generate both SVG and PNG:
npx mmdc -i help/diagrams/FILENAME.mermaid -o help/diagrams/FILENAME.svg -w 1400 -H 1600 -s 2 -b transparent -t default
npx mmdc -i help/diagrams/FILENAME.mermaid -o help/diagrams/FILENAME.png -w 1400 -H 1600 -s 2 -b transparent -t default
Automatically regenerate both SVG and PNG whenever you update a .mermaid file - keep diagrams in sync with source.
If you have a stack of sequential boxes with no branches, collapse into a single box with steps as bullet points:
❌ Avoid this:
A[Step 1] --> B[Step 2] --> C[Step 3] --> D[Step 4]
✅ Prefer this:
Process[Process Flow:<br/>• Step 1<br/>• Step 2<br/>• Step 3<br/>• Step 4]
Include a detailed comment in the .mermaid file with a prompt to describe/reproduce this diagram for future reference, including references to relevant files/functions and any other details/intent mentioned by the user. If asked to update the diagram, update the prompt-comment accordingly.
Reduce spacing so that more information fits on the screen.
Include icons sparingly, e.g. for different systems, actions, components.
Use courier (or other monospaced font) for API endpoints, urls, function names, variables, etc.
Use italic or bold in other ways to help aid comprehension.
Use colour appropriately to distinguish major components.
For example, you might give different colours to different systems, e.g.
Perhaps use one colour scheme for the outer boxes that group things (e.g. for systems), and another colour scheme for inner boxes based on a different typology. Use your judgment.
For database relationships, use database UML-style lines/arrows/shapes.
Likewise, if there's a domain-standard visual-notational scheme that's relevant for (part of) the diagram, use it there.
npx tsx src/ts/cli/sequential-datetime-prefix.ts help/diagrams/ if available, otherwise date +%y%m%d (add letter suffix if needed).mermaid file with the generated prefix in help/diagrams/npx mmdc -i help/diagrams/FILENAME.mermaid -o help/diagrams/FILENAME.svg -w 1400 -H 1600 -s 2 -b transparent
npx mmdc -i help/diagrams/FILENAME.mermaid -o help/diagrams/FILENAME.png -w 1400 -H 1600 -s 2 -b transparent
open help/diagrams/FILENAME.svg (or xdg-open on Linux)# Get the next sequential prefix (manual approach)
date +%y%m%d
# Output: 250701 (add letter suffix manually: 250701a, 250701b, etc.)
# OR get automated sequential prefix
npx tsx src/ts/cli/sequential-datetime-prefix.ts
# Output: 250701a (automatically finds next available letter)
# Create the diagram file
# Create: help/diagrams/250701d_tool_execution_flow.mermaid
# Generate SVG and PNG
npx mmdc -i help/diagrams/250701d_tool_execution_flow.mermaid -o help/diagrams/250701d_tool_execution_flow.svg -w 1400 -H 1600 -s 2 -b transparent
npx mmdc -i help/diagrams/250701d_tool_execution_flow.mermaid -o help/diagrams/250701d_tool_execution_flow.png -w 1400 -H 1600 -s 2 -b transparent
# Open (e.g. in browser, or other default application) to verify (or use similar OS-appropriate command)
open help/diagrams/250701d_tool_execution_flow.svg