{"id":"127c606d-ba92-46f9-8ce9-6450d22762bb","shortId":"cdZLwU","kind":"skill","title":"mermaid-creator","tagline":"Use when creating or converting Mermaid diagrams (for example flowcharts, sequence diagrams, ER diagrams, and Gantt charts), including exporting to SVG for docs or slides.","description":"# Mermaid Creator\n\nCreate professional diagrams using Mermaid syntax for documentation, architecture design, and data modeling.\n\n## Workflow\n\n1. **Choose diagram type** - Select the appropriate diagram based on what needs to be visualized\n2. **Create .mmd file** - Write Mermaid syntax in a `.mmd` file\n3. **Validate syntax** - Check syntax is correct (Mermaid CLI will report errors)\n4. **Convert to SVG** (optional) - Generate SVG for embedding in presentations or documents\n\n## Diagram Type Selection\n\nChoose the right diagram type for your use case:\n\n| Type | Use Case | Reference |\n|------|----------|-----------|\n| **Flowchart** | Processes, workflows, decision trees | [flowchart.md](references/flowchart.md) |\n| **Sequence** | API interactions, system communications, message flows | [sequence.md](references/sequence.md) |\n| **Class** | Object-oriented design, data models, relationships | [class.md](references/class.md) |\n| **State** | State machines, workflow states, system states | [state.md](references/state.md) |\n| **ER** | Database schemas, entity relationships | [er.md](references/er.md) |\n| **Gantt** | Project timelines, task scheduling | [other-types.md](references/other-types.md#gantt-charts) |\n| **Pie** | Data distribution, percentages | [other-types.md](references/other-types.md#pie-charts) |\n| **Git** | Git history, branching strategies | [other-types.md](references/other-types.md#git-graphs) |\n| **Journey** | User experience flows | [other-types.md](references/other-types.md#user-journey) |\n| **Quadrant** | 2D comparison, prioritization | [other-types.md](references/other-types.md#quadrant-chart) |\n| **Timeline** | Chronological events | [other-types.md](references/other-types.md#timeline) |\n\n**Load references as needed**: Each reference file contains syntax, patterns, examples, and best practices for that diagram type.\n\n## Quick Start Examples\n\n### Flowchart\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Process]\n    B -->|No| D[Alternative]\n    C --> E[End]\n    D --> E\n```\n\n### Sequence Diagram\n\n```mermaid\nsequenceDiagram\n    participant Client\n    participant Server\n    participant DB\n\n    Client->>Server: Request\n    Server->>DB: Query\n    DB-->>Server: Data\n    Server-->>Client: Response\n```\n\n### Class Diagram\n\n```mermaid\nclassDiagram\n    class User {\n        +String name\n        +String email\n        +login()\n    }\n\n    class Post {\n        +String title\n        +String content\n        +publish()\n    }\n\n    User \"1\" --> \"*\" Post : creates\n```\n\n## Example Files\n\nThe skill includes ready-to-use `.mmd` example files in `assets/examples/` that can be copied and modified:\n\n```\nassets/examples/\n├── flowchart/          # 10 flowchart examples\n│   ├── basic.mmd\n│   ├── node-shapes.mmd\n│   ├── connections.mmd\n│   ├── process-flow.mmd\n│   ├── decision-tree.mmd\n│   └── ...\n├── sequence/           # 12 sequence diagram examples\n│   ├── basic.mmd\n│   ├── rest-api.mmd\n│   ├── authentication-flow.mmd\n│   └── ...\n├── class/              # 13 class diagram examples\n│   ├── basic.mmd\n│   ├── inheritance.mmd\n│   ├── interface.mmd\n│   └── ...\n├── state/              # 13 state diagram examples\n│   ├── basic.mmd\n│   ├── order-processing.mmd\n│   ├── authentication.mmd\n│   └── ...\n├── er/                 # 10 ER diagram examples\n│   ├── basic.mmd\n│   ├── blog-system.mmd\n│   ├── ecommerce.mmd\n│   └── ...\n└── other/              # 16 other diagram type examples\n    ├── gantt-basic.mmd\n    ├── pie-basic.mmd\n    ├── git-feature-branch.mmd\n    ├── journey-shopping.mmd\n    ├── quadrant-basic.mmd\n    ├── timeline-basic.mmd\n    └── ...\n```\n\n**Usage**: Copy example files as templates for your diagrams. All examples are tested and ready to use with the Mermaid CLI.\n\n## Mermaid CLI\n\n### Installation\n\n```shell\nnpm install -g @mermaid-js/mermaid-cli\n```\n\n### Convert to SVG\n\n```shell\nmmdc -i diagram.mmd -o diagram.svg\n```\n\n### Batch Conversion\n\n```shell\nmmdc -i input1.mmd -i input2.mmd -o output/\n```\n\n### With Configuration\n\n```shell\nmmdc -i diagram.mmd -o diagram.svg -t dark -b transparent\n```\n\nOptions:\n- `-t` - Theme (default, dark, forest, neutral)\n- `-b` - Background color or `transparent`\n- `-w` - Width\n- `-H` - Height\n\n## Best Practices\n\n### General Guidelines\n\n- **Choose the right diagram type** - Match the diagram to the information structure\n- **Keep it simple** - Split complex diagrams into multiple focused diagrams\n- **Use descriptive labels** - Avoid abbreviations unless well-known\n- **Be consistent** - Use consistent naming and styling within a diagram\n- **Validate syntax** - Run through Mermaid CLI to catch errors early\n\n### For Documentation\n\n- Create separate `.mmd` files for each diagram\n- Store diagrams near the documentation they support\n- Include comments in complex diagrams using `%%` for Mermaid comments\n- Generate SVG for static documentation\n- Commit both `.mmd` source and generated SVG\n\n### For Presentations\n\n- Use high contrast colors for visibility\n- Keep text large and readable\n- Test diagram rendering at presentation size\n- Use `transparent` background to match slide themes\n- Prefer SVG over PNG for crisp rendering\n\n### Performance\n\n- Large diagrams (>50 nodes) may render slowly\n- Split large flowcharts using off-page connectors\n- For ER diagrams with many entities, show only relevant relationships\n- Consider using subgraphs to organize complex diagrams\n\n## Common Patterns\n\n### Decision Logic\n\nUse flowcharts with diamond decision nodes:\n\n```mermaid\nflowchart TD\n    Input[Get Input] --> Validate{Valid?}\n    Validate -->|Yes| Process[Process]\n    Validate -->|No| Error[Error]\n```\n\n### System Interactions\n\nUse sequence diagrams for temporal interactions:\n\n```mermaid\nsequenceDiagram\n    User->>System: Action\n    System->>Database: Query\n    Database-->>System: Result\n    System-->>User: Response\n```\n\n### Data Models\n\nUse ER diagrams for database schemas or class diagrams for object models.\n\n### Process Workflows\n\nUse state diagrams for state machines or flowcharts for process flows.\n\n## Troubleshooting\n\n### Syntax Errors\n\nRun `mmdc -i file.mmd -o output.svg` to see specific error messages.\n\nCommon issues:\n- Missing spaces around arrows (`A-->B` should be `A --> B` in some contexts)\n- Unclosed quotes in labels\n- Invalid characters in IDs (use alphanumeric + underscore)\n- Wrong diagram type declaration\n\n### Rendering Issues\n\n- Check Mermaid CLI version: `mmdc --version`\n- Update to latest: `npm install -g @mermaid-js/mermaid-cli@latest`\n- Try different themes if elements overlap\n- Reduce diagram complexity\n\n### SVG Quality\n\n- Use `mmdc -w 1920` for high-resolution output\n- Set background to `transparent` for flexible embedding\n- Test generated SVG in target environment\n\n## Advanced Features\n\nMost diagram types support:\n- **Styling**: Custom colors, fonts, and borders\n- **Subgraphs/Grouping**: Organize related elements\n- **Notes**: Add explanatory text\n- **Direction**: Change layout orientation\n- **Classes**: Reusable style definitions\n\nSee individual diagram reference files for syntax and examples.","tags":["mermaid","creator","skills","narumiruna","agent-skills"],"capabilities":["skill","source-narumiruna","skill-mermaid-creator","topic-agent-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/narumiruna/skills/mermaid-creator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add narumiruna/skills","source_repo":"https://github.com/narumiruna/skills","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (7,057 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:13:46.659Z","embedding":null,"createdAt":"2026-05-18T19:13:46.659Z","updatedAt":"2026-05-18T19:13:46.659Z","lastSeenAt":"2026-05-18T19:13:46.659Z","tsv":"'/mermaid-cli':398,740 '1':45,290 '10':315,348 '12':324 '13':332,340 '16':356 '1920':756 '2':60 '2d':193 '3':71 '4':83 '50':574 'abbrevi':476 'action':642 'add':792 'advanc':775 'alphanumer':717 'altern':243 'api':120 'appropri':51 'architectur':39 'around':697 'arrow':698 'assets/examples':306,313 'authentication-flow.mmd':330 'authentication.mmd':346 'avoid':475 'b':234,236,240,428,437,700,704 'background':438,559,763 'base':53 'basic.mmd':318,328,336,344,352 'batch':408 'best':219,446 'blog-system.mmd':353 'border':786 'branch':176 'c':238,244 'case':107,110 'catch':498 'chang':796 'charact':713 'chart':20,163,172,200 'check':74,725 'choos':46,99,450 'chronolog':202 'class':128,271,275,282,331,333,661,799 'class.md':136 'classdiagram':274 'cli':79,387,389,496,727 'client':254,259,269 'color':439,543,783 'comment':518,525 'commit':531 'common':604,693 'communic':123 'comparison':194 'complex':466,520,602,750 'configur':419 'connections.mmd':320 'connector':586 'consid':597 'consist':482,484 'contain':214 'content':287 'context':707 'contrast':542 'convers':409 'convert':8,84,399 'copi':310,368 'correct':77 'creat':6,31,61,292,503 'creator':3,30 'crisp':569 'custom':782 'd':242,247 'dark':427,434 'data':42,133,165,267,652 'databas':148,644,646,658 'db':258,263,265 'decis':115,235,606,612 'decision-tree.mmd':322 'declar':722 'default':433 'definit':802 'descript':473 'design':40,132 'diagram':10,15,17,33,47,52,96,102,223,250,272,326,334,342,350,358,375,453,457,467,471,490,509,511,521,552,573,589,603,634,656,662,670,720,749,778,805 'diagram.mmd':405,423 'diagram.svg':407,425 'diamond':611 'differ':743 'direct':795 'distribut':166 'doc':26 'document':38,95,502,514,530 'e':245,248 'earli':500 'ecommerce.mmd':354 'element':746,790 'email':280 'embed':91,768 'end':246 'entiti':150,592 'environ':774 'er':16,147,347,349,588,655 'er.md':152 'error':82,499,628,629,681,691 'event':203 'exampl':12,217,227,293,303,317,327,335,343,351,360,369,377,811 'experi':185 'explanatori':793 'export':22 'featur':776 'file':63,70,213,294,304,370,506,807 'file.mmd':685 'flexibl':767 'flow':125,186,678 'flowchart':13,112,228,230,314,316,581,609,615,675 'flowchart.md':117 'focus':470 'font':784 'forest':435 'g':394,736 'gantt':19,154,162 'gantt-basic.mmd':361 'gantt-chart':161 'general':448 'generat':88,526,536,770 'get':618 'git':173,174,181 'git-feature-branch.mmd':363 'git-graph':180 'graph':182 'guidelin':449 'h':444 'height':445 'high':541,759 'high-resolut':758 'histori':175 'id':715 'includ':21,297,517 'individu':804 'inform':460 'inheritance.mmd':337 'input':617,619 'input1.mmd':413 'input2.mmd':415 'instal':390,393,735 'interact':121,631,637 'interface.mmd':338 'invalid':712 'issu':694,724 'journey':183,191 'journey-shopping.mmd':364 'js':397,739 'keep':462,546 'known':480 'label':474,711 'larg':548,572,580 'latest':733,741 'layout':797 'load':207 'logic':607 'login':281 'machin':140,673 'mani':591 'match':455,561 'may':576 'mermaid':2,9,29,35,65,78,229,251,273,386,388,396,495,524,614,638,726,738 'mermaid-cr':1 'mermaid-j':395,737 'messag':124,692 'miss':695 'mmd':62,69,302,505,533 'mmdc':403,411,421,683,729,754 'model':43,134,653,665 'modifi':312 'multipl':469 'name':278,485 'near':512 'need':56,210 'neutral':436 'node':575,613 'node-shapes.mmd':319 'note':791 'npm':392,734 'o':406,416,424,686 'object':130,664 'object-ori':129 'off-pag':583 'option':87,430 'order-processing.mmd':345 'organ':601,788 'orient':131,798 'other-types.md':159,168,178,187,196,204 'output':417,761 'output.svg':687 'overlap':747 'page':585 'particip':253,255,257 'pattern':216,605 'percentag':167 'perform':571 'pie':164,171 'pie-basic.mmd':362 'pie-chart':170 'png':567 'post':283,291 'practic':220,447 'prefer':564 'present':93,539,555 'priorit':195 'process':113,239,624,625,666,677 'process-flow.mmd':321 'profession':32 'project':155 'publish':288 'quadrant':192,199 'quadrant-basic.mmd':365 'quadrant-chart':198 'qualiti':752 'queri':264,645 'quick':225 'quot':709 'readabl':550 'readi':299,381 'ready-to-us':298 'reduc':748 'refer':111,208,212,806 'references/class.md':137 'references/er.md':153 'references/flowchart.md':118 'references/other-types.md':160,169,179,188,197,205 'references/sequence.md':127 'references/state.md':146 'relat':789 'relationship':135,151,596 'relev':595 'render':553,570,577,723 'report':81 'request':261 'resolut':760 'respons':270,651 'rest-api.mmd':329 'result':648 'reusabl':800 'right':101,452 'run':493,682 'schedul':158 'schema':149,659 'see':689,803 'select':49,98 'separ':504 'sequenc':14,119,249,323,325,633 'sequence.md':126 'sequencediagram':252,639 'server':256,260,262,266,268 'set':762 'shell':391,402,410,420 'show':593 'simpl':464 'size':556 'skill':296 'skill-mermaid-creator' 'slide':28,562 'slowli':578 'sourc':534 'source-narumiruna' 'space':696 'specif':690 'split':465,579 'start':226,233 'state':138,139,142,144,339,341,669,672 'state.md':145 'static':529 'store':510 'strategi':177 'string':277,279,284,286 'structur':461 'style':487,781,801 'subgraph':599 'subgraphs/grouping':787 'support':516,780 'svg':24,86,89,401,527,537,565,751,771 'syntax':36,66,73,75,215,492,680,809 'system':122,143,630,641,643,647,649 'target':773 'task':157 'td':231,616 'templat':372 'tempor':636 'test':379,551,769 'text':547,794 'theme':432,563,744 'timelin':156,201,206 'timeline-basic.mmd':366 'titl':285 'topic-agent-skills' 'transpar':429,441,558,765 'tree':116 'tri':742 'troubleshoot':679 'type':48,97,103,108,224,359,454,721,779 'unclos':708 'underscor':718 'unless':477 'updat':731 'usag':367 'use':4,34,106,109,301,383,472,483,522,540,557,582,598,608,632,654,668,716,753 'user':184,190,276,289,640,650 'user-journey':189 'valid':72,491,620,621,622,626 'version':728,730 'visibl':545 'visual':59 'w':442,755 'well':479 'well-known':478 'width':443 'within':488 'workflow':44,114,141,667 'write':64 'wrong':719 'yes':237,623","prices":[{"id":"6f64d56b-9627-4197-854c-43542d66e56e","listingId":"127c606d-ba92-46f9-8ce9-6450d22762bb","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"narumiruna","category":"skills","install_from":"skills.sh"},"createdAt":"2026-05-18T19:13:46.659Z"}],"sources":[{"listingId":"127c606d-ba92-46f9-8ce9-6450d22762bb","source":"github","sourceId":"narumiruna/skills/mermaid-creator","sourceUrl":"https://github.com/narumiruna/skills/tree/main/skills/mermaid-creator","isPrimary":false,"firstSeenAt":"2026-05-18T19:13:46.659Z","lastSeenAt":"2026-05-18T19:13:46.659Z"}],"details":{"listingId":"127c606d-ba92-46f9-8ce9-6450d22762bb","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"narumiruna","slug":"mermaid-creator","github":{"repo":"narumiruna/skills","stars":7,"topics":["agent-skills"],"license":"mit","html_url":"https://github.com/narumiruna/skills","pushed_at":"2026-05-17T11:15:28Z","description":null,"skill_md_sha":"fa61c2c67adcfeaf7ed0830901622ad3cd1639b2","skill_md_path":"skills/mermaid-creator/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/narumiruna/skills/tree/main/skills/mermaid-creator"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"mermaid-creator","description":"Use when creating or converting Mermaid diagrams (for example flowcharts, sequence diagrams, ER diagrams, and Gantt charts), including exporting to SVG for docs or slides."},"skills_sh_url":"https://skills.sh/narumiruna/skills/mermaid-creator"},"updatedAt":"2026-05-18T19:13:46.659Z"}}