I built this tool because my personal diagramming workflow was broken, and I wanted to automate it.
When creating diagrams, I have two conflicting needs. For logic and structure, I prefer Mermaid.js here. It’s deterministic, version-controllable, and lets me tweak the logic easily until it matches exactly what’s in my head. For aesthetics, I need the final result to look like a high-end infographic for presentations, which Mermaid (and standard tools) are bad at. Before Nanobanana Pro came out, AI image generation cannot generate good visual presentation for diagrams because it always messed up with characters/texts. Now Nanobanana makes everything possible.
My Solution (The Workflow): I built an app that combines Mermaid and Nanobanana into a pipeline:
Step 1 (Draft): I use a lightweight LLM to generate Mermaid syntax. I can edit this code manually to refine the logic until the structure is perfect.
Step 2 (Render): Once the logic is locked, I pipe it into Gemini 3 Pro (Nano Banana).
Why this works: Unlike standard image generation, this workflow forces the AI to respect the "Logic Layer" from the Mermaid draft while applying the "Vision Layer" for aesthetics. It keeps the original information (text/nodes) accurate but renders it as a professional infographic.The "Logic" mode is free forever. I charge credits for the "Vision" mode because the Gemini 3 API costs are significant.
Link: https://diagram-generator.com
Feedback on the text legibility in the rendered images would be appreciated!