[{"data":1,"prerenderedAt":548},["ShallowReactive",2],{"content-\u002Fplugins\u002Faio-diagramming\u002Faio-mermaid":3,"children-\u002Fplugins\u002Faio-diagramming\u002Faio-mermaid":547,"twin-\u002Fplugins\u002Faio-diagramming\u002Faio-mermaid":542},{"id":4,"title":5,"author":6,"body":7,"budget_tier":6,"build_tags":6,"created":6,"description":538,"document_type":539,"extension":540,"game":6,"install":36,"investment_tier":6,"league":6,"meta":541,"navigation":542,"patch":6,"path":543,"plugin":24,"profit_per_hour":6,"ratings":6,"seo":544,"skills_count":6,"status":6,"stem":545,"strategy_tier":6,"tags":6,"updated":6,"version":6,"weight":6,"__hash__":546},"content\u002Fplugins\u002Faio-diagramming\u002Faio-mermaid.md","aio-mermaid",null,{"type":8,"value":9,"toc":516},"minimark",[10,37,42,47,63,69,73,76,103,119,123,134,144,147,153,199,202,208,212,215,229,233,236,244,248,256,260,342,346,351,357,361,369,373,379,383,386,450,454,458,464,468,474,478],[11,12,13],"blockquote",{},[14,15,16,17,25,26,25,30,33,34],"p",{},"From plugin ",[18,19,21],"a",{"href":20},"\u002Fplugins\u002Faio-diagramming",[22,23,24],"strong",{},"aio-diagramming"," · ",[27,28,29],"code",{},"v1.0.2",[22,31,32],{},"Install:"," ",[27,35,36],{},"\u002Fplugin install aio-diagramming@aiocean-plugins",[38,39,41],"h1",{"id":40},"minimalmermaid-url-generator","MinimalMermaid URL Generator",[43,44,46],"h2",{"id":45},"environment","Environment",[48,49,50,57],"ul",{},[51,52,53,54],"li",{},"bun: !",[27,55,56],{},"which bun 2>\u002Fdev\u002Fnull || echo \"NOT INSTALLED\"",[51,58,59,60],{},"node: !",[27,61,62],{},"which node 2>\u002Fdev\u002Fnull || echo \"NOT INSTALLED\"",[14,64,65,66],{},"Base URL: ",[27,67,68],{},"https:\u002F\u002Fmimaid.aiocean.dev\u002F",[43,70,72],{"id":71},"critical-no-markdown-in-mermaid-code","🚨 CRITICAL: NO MARKDOWN IN MERMAID CODE",[14,74,75],{},"Mermaid is NOT markdown. These will BREAK your diagram:",[14,77,78,79,82,83,86,87,90,91,94,95,98,99,102],{},"❌ ",[27,80,81],{},"**bold**"," - NEVER use double asterisks\n❌ ",[27,84,85],{},"*italic*"," - NEVER use single asterisks\n❌ ",[27,88,89],{},"_underscore_"," - NEVER use underscores for emphasis\n❌ ",[27,92,93],{},"[link](url)"," - NEVER use markdown links\n❌ ",[27,96,97],{},"`code`"," - NEVER use backticks inside labels\n❌ ",[27,100,101],{},"# headers"," - NEVER use hash headers",[14,104,105,106,109,110,109,113,109,116],{},"✅ CORRECT: ",[27,107,108],{},"A[User clicks button]","\n❌ WRONG: ",[27,111,112],{},"A[User **clicks** button]",[27,114,115],{},"A[User _clicks_ button]",[27,117,118],{},"A[See [docs](url)]",[43,120,122],{"id":121},"use-mermaid-v11-syntax","Use Mermaid v11 Syntax",[14,124,125,126,129,130,133],{},"Use ",[27,127,128],{},"flowchart"," NOT ",[27,131,132],{},"graph",":",[135,136,142],"pre",{"className":137,"code":139,"language":140,"meta":141},[138],"language-mermaid","flowchart TD\n    A[Start] --> B[End]\n","mermaid","",[27,143,139],{"__ignoreMap":141},[14,145,146],{},"Use v11 shape syntax:",[135,148,151],{"className":149,"code":150,"language":140,"meta":141},[138],"flowchart TD\n    A@{ shape: stadium, label: \"Terminal\" }\n    B@{ shape: diamond, label: \"Decision\" }\n    C@{ shape: cyl, label: \"Database\" }\n    A --> B --> C\n",[27,152,150],{"__ignoreMap":141},[14,154,155,156,159,160,159,163,159,166,159,169,159,172,159,175,159,178,159,181,159,184,159,187,159,190,159,193,159,196],{},"Available shapes: ",[27,157,158],{},"rect",", ",[27,161,162],{},"rounded",[27,164,165],{},"stadium",[27,167,168],{},"diamond",[27,170,171],{},"hex",[27,173,174],{},"cyl",[27,176,177],{},"doc",[27,179,180],{},"docs",[27,182,183],{},"delay",[27,185,186],{},"trap-t",[27,188,189],{},"trap-b",[27,191,192],{},"fork",[27,194,195],{},"cloud",[27,197,198],{},"odd",[14,200,201],{},"Use styling instead of markdown:",[135,203,206],{"className":204,"code":205,"language":140,"meta":141},[138],"flowchart TD\n    A[Important] --> B[Step]\n    style A fill:#ff6b6b,stroke:#c92a2a,color:#fff\n",[27,207,205],{"__ignoreMap":141},[43,209,211],{"id":210},"how-it-works","How It Works",[14,213,214],{},"MinimalMermaid stores diagram code in the URL hash using LZ-String compression:",[48,216,217,223],{},[51,218,219,220],{},"Compression: ",[27,221,222],{},"LZString.compressToEncodedURIComponent(code)",[51,224,225,226],{},"Decompression: ",[27,227,228],{},"LZString.decompressFromEncodedURIComponent(hash)",[43,230,232],{"id":231},"generating-urls","Generating URLs",[14,234,235],{},"Use JavaScript to generate shareable URLs:",[135,237,242],{"className":238,"code":240,"language":241,"meta":141},[239],"language-javascript","\u002F\u002F Using lz-string library\nconst LZString = require(\"lz-string\");\n\nconst mermaidCode = `flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Do Something]\n    B -->|No| D[Do Nothing]\n    C --> E[End]\n    D --> E`;\n\nconst compressed = LZString.compressToEncodedURIComponent(mermaidCode);\nconst url = `https:\u002F\u002Fmimaid.aiocean.dev\u002F#${compressed}`;\nconsole.log(url);\n","javascript",[27,243,240],{"__ignoreMap":141},[43,245,247],{"id":246},"quick-generation-bash","Quick Generation (Bash)",[135,249,254],{"className":250,"code":252,"language":253,"meta":141},[251],"language-bash","# Install lz-string if needed\nbun add -g lz-string\n\n# Generate URL using Node\u002FBun\nbun -e \"\nconst LZString = require('lz-string');\nconst code = \\`flowchart TD\n    A --> B\\`;\nconsole.log('https:\u002F\u002Fmimaid.aiocean.dev\u002F#' + LZString.compressToEncodedURIComponent(code));\n\"\n","bash",[27,255,252],{"__ignoreMap":141},[43,257,259],{"id":258},"url-parameters","URL Parameters",[261,262,263,279],"table",{},[264,265,266],"thead",{},[267,268,269,273,276],"tr",{},[270,271,272],"th",{},"Parameter",[270,274,275],{},"Usage",[270,277,278],{},"Description",[280,281,282,298,313,328],"tbody",{},[267,283,284,290,295],{},[285,286,287],"td",{},[27,288,289],{},"#\u003Chash>",[285,291,292],{},[27,293,294],{},"\u002F#CYew5g...",[285,296,297],{},"Compressed diagram code (required for sharing)",[267,299,300,305,310],{},[285,301,302],{},[27,303,304],{},"?room=\u003Cid>",[285,306,307],{},[27,308,309],{},"?room=myroom",[285,311,312],{},"Enable real-time collaboration",[267,314,315,320,325],{},[285,316,317],{},[27,318,319],{},"?name=\u003Cname>",[285,321,322],{},[27,323,324],{},"?name=Alice",[285,326,327],{},"Set display name for collaboration",[267,329,330,335,339],{},[285,331,332],{},[27,333,334],{},"?hideEditor",[285,336,337],{},[27,338,334],{},[285,340,341],{},"View-only mode (hides editor pane)",[43,343,345],{"id":344},"common-patterns","Common Patterns",[347,348,350],"h3",{"id":349},"share-a-diagram","Share a Diagram",[135,352,355],{"className":353,"code":354,"language":241,"meta":141},[239],"const LZString = require(\"lz-string\");\nconst code = `your mermaid code here`;\nconst hash = LZString.compressToEncodedURIComponent(code);\nconsole.log(`https:\u002F\u002Fmimaid.aiocean.dev\u002F#${hash}`);\n",[27,356,354],{"__ignoreMap":141},[347,358,360],{"id":359},"collaborate-on-a-diagram","Collaborate on a Diagram",[135,362,367],{"className":363,"code":365,"language":366},[364],"language-text","https:\u002F\u002Fmimaid.aiocean.dev\u002F?room=project-planning&name=Alice#\u003Chash>\n","text",[27,368,365],{"__ignoreMap":141},[347,370,372],{"id":371},"embed-view-only","Embed View-Only",[135,374,377],{"className":375,"code":376,"language":366},[364],"https:\u002F\u002Fmimaid.aiocean.dev\u002F?hideEditor#\u003Chash>\n",[27,378,376],{"__ignoreMap":141},[43,380,382],{"id":381},"supported-diagram-types","Supported Diagram Types",[14,384,385],{},"All Mermaid diagram types are supported:",[48,387,388,396,402,408,414,420,426,432,438,444],{},[51,389,390,392,393,395],{},[27,391,128],{}," \u002F ",[27,394,132],{}," - Flow diagrams",[51,397,398,401],{},[27,399,400],{},"sequenceDiagram"," - Sequence diagrams",[51,403,404,407],{},[27,405,406],{},"classDiagram"," - Class diagrams",[51,409,410,413],{},[27,411,412],{},"stateDiagram-v2"," - State diagrams",[51,415,416,419],{},[27,417,418],{},"erDiagram"," - Entity relationship diagrams",[51,421,422,425],{},[27,423,424],{},"gantt"," - Gantt charts",[51,427,428,431],{},[27,429,430],{},"pie"," - Pie charts",[51,433,434,437],{},[27,435,436],{},"mindmap"," - Mind maps",[51,439,440,443],{},[27,441,442],{},"timeline"," - Timelines",[51,445,446,449],{},[27,447,448],{},"gitgraph"," - Git graphs",[43,451,453],{"id":452},"example-urls","Example URLs",[347,455,457],{"id":456},"simple-flowchart","Simple Flowchart",[135,459,462],{"className":460,"code":461,"language":241,"meta":141},[239],"const code = `flowchart LR\n    A[Input] --> B[Process] --> C[Output]`;\n\u002F\u002F Generates: https:\u002F\u002Fmimaid.aiocean.dev\u002F#CYew5gLgpgBAYgdwDYBMCWA7ALgJwKYzCQAUJAUANQD0+ANCLgM4gDmIAxlQN4C+oAZuRhRYAIz79BIOA2bkQYUJFgByPgG4QAen0A6AAphYhYqXKVITAMYgL0ONXSyRBgExA\n",[27,463,461],{"__ignoreMap":141},[347,465,467],{"id":466},"sequence-diagram","Sequence Diagram",[135,469,472],{"className":470,"code":471,"language":241,"meta":141},[239],"const code = `sequenceDiagram\n    Alice->>Bob: Hello Bob!\n    Bob-->>Alice: Hi Alice!`;\n\u002F\u002F Generates: https:\u002F\u002Fmimaid.aiocean.dev\u002F#CYQwLgBA9gTgpgOwC4FcDOA7ALiATgVxGGAGEB7EAGxAGMB7MAZxoG9i6B+AFxADNg5ACYguIAHS5C+UWIkAaEAEYZs2VPnzBAbnoAGaeIqNQA\n",[27,473,471],{"__ignoreMap":141},[43,475,477],{"id":476},"features","Features",[48,479,480,486,492,498,504,510],{},[51,481,482,485],{},[22,483,484],{},"AI-Powered",": Generate diagrams using natural language with Google Gemini",[51,487,488,491],{},[22,489,490],{},"Real-time Collaboration",": Multiple users can edit simultaneously",[51,493,494,497],{},[22,495,496],{},"Auto-Save",": URL updates automatically as you type",[51,499,500,503],{},[22,501,502],{},"Pan & Zoom",": Navigate large diagrams easily",[51,505,506,509],{},[22,507,508],{},"Export",": Copy SVG or download PNG",[51,511,512,515],{},[22,513,514],{},"Syntax Highlighting",": Monaco editor with Mermaid support",{"title":141,"searchDepth":517,"depth":517,"links":518},2,[519,520,521,522,523,524,525,526,532,533,537],{"id":45,"depth":517,"text":46},{"id":71,"depth":517,"text":72},{"id":121,"depth":517,"text":122},{"id":210,"depth":517,"text":211},{"id":231,"depth":517,"text":232},{"id":246,"depth":517,"text":247},{"id":258,"depth":517,"text":259},{"id":344,"depth":517,"text":345,"children":527},[528,530,531],{"id":349,"depth":529,"text":350},3,{"id":359,"depth":529,"text":360},{"id":371,"depth":529,"text":372},{"id":381,"depth":517,"text":382},{"id":452,"depth":517,"text":453,"children":534},[535,536],{"id":456,"depth":529,"text":457},{"id":466,"depth":529,"text":467},{"id":476,"depth":517,"text":477},"Generate shareable Mermaid diagram URLs (LZ-String compressed) for flowcharts, sequence, class, ER, state, and gantt diagrams.","skill","md",{},true,"\u002Fplugins\u002Faio-diagramming\u002Faio-mermaid",{"title":5,"description":538},"plugins\u002Faio-diagramming\u002Faio-mermaid","nAZ2RceBQC7bPhUu-v9-NYPnTKgHcxnRylKrnvT0r5s",[],1779712313213]