Vibe Mermaid Flowcharting

Sure, ChatGPT, Claude, et al. have been great coding partners lately. They’ve sped things up for me, but my real eureka was discovering they can draft Mermaid diagrams.

I’ve always wanted to sketch flows to describe ideas and code, yet I never found a tool to my liking, and I prefer keeping things as plain text I can save locally. Mermaid solves both, but I was sooo sloooow creating these flowcharts, and the results looked…ugly.

Enter Claude.

I jot down the flow in pseudo-code, ask Claude to turn it into a beautiful Mermaid chart, and, boom! I’ve got a clear, nice, shareable diagram for colleagues. No fuss, easy to version-control, and painless to tweak. A total game-changer for me. Instead of helping me 10x something, it helped me do something I’d mostly skipped doing before.

This

1. jot down flow
2. ask claude to make a mermaid chart
3. perfect?
3a. yes: done
3b. no: tweak until perfect

Turns into this

flowchart TD
    Start([🚀 Start]) --> Think[💭 Think through the process]
    Think --> Jot[📝 Jot down flow in pseudo-code]
    Jot --> Claude[🤖 Ask Claude:<br/>'Turn this into a beautiful<br/>Mermaid chart']
    Claude --> Review{🔍 Review result}
    Review -->|Perfect!| Save[💾 Save & version control]
    Review -->|Needs work| Tweak[🔧 Tweak the flow]
    Tweak --> Claude
    Save --> Share[📤 Share with colleagues]
    Share --> Done([✅ Done!])
    
    style Start fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff
    style Think fill:#e1f5fe,stroke:#0277bd,stroke-width:2px
    style Jot fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    style Claude fill:#fff3e0,stroke:#ef6c00,stroke-width:2px
    style Review fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style Tweak fill:#fff8e1,stroke:#f57c00,stroke-width:2px
    style Save fill:#e8f5e8,stroke:#388e3c,stroke-width:2px
    style Share fill:#f1f8e9,stroke:#689f38,stroke-width:2px
    style Done fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff