← ClaudeAtlas

aio-mermaidlisted

Generate shareable Mermaid diagram URLs (LZ-String compressed). Use when you want to draw a diagram, create an architecture diagram, generate a flowchart, make a sequence diagram URL, build a mindmap, timeline, or gitgraph — and share it as a link. Supports all Mermaid v11 types: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, mindmap, timeline, gitgraph.
aiocean/claude-plugins · ★ 4 · AI & Automation · score 74
Install: claude install-skill aiocean/claude-plugins
# MinimalMermaid URL Generator ## Environment - bun: !`which bun 2>/dev/null || echo "NOT INSTALLED"` - node: !`which node 2>/dev/null || echo "NOT INSTALLED"` Base URL: `https://mimaid.aiocean.dev/` ## 🚨 CRITICAL: NO MARKDOWN IN MERMAID CODE Mermaid is NOT markdown. These will BREAK your diagram: ❌ `**bold**` - NEVER use double asterisks ❌ `*italic*` - NEVER use single asterisks ❌ `_underscore_` - NEVER use underscores for emphasis ❌ `[link](url)` - NEVER use markdown links ❌ `` `code` `` - NEVER use backticks inside labels ❌ `# headers` - NEVER use hash headers ✅ CORRECT: `A[User clicks button]` ❌ WRONG: `A[User **clicks** button]` ❌ WRONG: `A[User _clicks_ button]` ❌ WRONG: `A[See [docs](url)]` ## Use Mermaid v11 Syntax Use `flowchart` NOT `graph`: ```mermaid flowchart TD A[Start] --> B[End] ``` Use v11 shape syntax: ```mermaid flowchart TD A@{ shape: stadium, label: "Terminal" } B@{ shape: diamond, label: "Decision" } C@{ shape: cyl, label: "Database" } A --> B --> C ``` Available shapes: `rect`, `rounded`, `stadium`, `diamond`, `hex`, `cyl`, `doc`, `docs`, `delay`, `trap-t`, `trap-b`, `fork`, `cloud`, `odd` Use styling instead of markdown: ```mermaid flowchart TD A[Important] --> B[Step] style A fill:#ff6b6b,stroke:#c92a2a,color:#fff ``` ## How It Works MinimalMermaid stores diagram code in the URL hash using LZ-String compression: - Compression: `LZString.compressToEncodedURIComponent(code)` - Decompression: `LZString.decomp