mermaid-server/working_single_line_mermaid.md

1.6 KiB

Working Single Line Mermaid Examples

These are confirmed working single-line mermaid diagrams that bypass the newline issue:

📊 Analytics Dashboard

graph LR; A[Website]-->B[Users: 1.2M]; A-->C[Revenue: $450K]; A-->D[Growth: +25%]

🔄 Basic Flowchart

graph TD; A[Analytics]-->B[Traffic]; A-->C[Revenue]; B-->D[Desktop]; B-->E[Mobile]

Process Flow

graph TD; Start[Start]-->Process[Process Data]-->Decision{Valid?}-->|Yes|End[Complete]; Decision-->|No|Error[Error]

🏗️ Network Architecture

graph LR; Client[Client]-->LB[Load Balancer]-->Server1[Server 1]; LB-->Server2[Server 2]; Server1-->DB[(Database)]; Server2-->DB

💬 API Sequence

sequenceDiagram; participant A as User; participant B as System; A->>B: Request; B-->>A: Response

📈 Traffic Sources (Pie Chart)

pie title Traffic Sources; "Direct": 40; "Search": 35; "Social": 15; "Referral": 10

🔀 Git Flow

gitGraph; commit; commit; branch develop; commit; commit; checkout main; merge develop

🎯 Test These First:

Ultra Simple Test:

graph TD; A[Test]-->B[Success]

Basic Analytics:

graph LR; A[Dashboard]-->B[Users]; A-->C[Sales]; A-->D[Traffic]

Don't Use These (They Require Newlines):

  • Journey diagrams
  • State diagrams
  • Class diagrams
  • Complex entity relationship diagrams

💡 Pro Tips:

  1. Always use semicolons (;) to separate statements
  2. Keep everything on one line
  3. Test simple versions first before adding complexity
  4. Flowcharts and sequence diagrams work best in single-line format