aio-mermaid

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:

flowchart TD
    A[Start] --> B[End]

Use v11 shape syntax:

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:

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.decompressFromEncodedURIComponent(hash)

Generating URLs

Use JavaScript to generate shareable URLs:

// Using lz-string library
const LZString = require("lz-string");

const mermaidCode = `flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Nothing]
    C --> E[End]
    D --> E`;

const compressed = LZString.compressToEncodedURIComponent(mermaidCode);
const url = `https://mimaid.aiocean.dev/#${compressed}`;
console.log(url);

Quick Generation (Bash)