"Hi Devs! 👋 This is my first post here. I wanted to share a privacy-focused tool I built recently. Hope you find it useful!"
The Problem I was debugging a massive, nested JSON response from an API the other day, and I needed to visualize the data flow to explain it to a teammate.
I found plenty of "JSON to Diagram" tools online, but they all had one major flaw: they sent my data to their servers.
When you're dealing with internal configs or sensitive API responses, pasting that data into a random "Free Online Converter" is a security nightmare. I didn't want to spin up a local container just to draw a flowchart.
The Solution So, I built my own tool that runs 100% client-side.
==> Try it here: JSON to Mermaid Generator
*How it works *: The tool takes your raw JSON and recursively traverses the object tree. It generates Mermaid.js syntax on the fly, which the browser then renders as a flowchart or class diagram.
Because it uses the browser's JavaScript engine for parsing, your data never leaves your tab.
Input: Messy, nested JSON.
Output: A clean, auto-generated flowchart (that you can copy/edit).
Security: Zero API calls for the conversion logic.
**Example **If you paste this:
{
"user": {
"id": 101,
"roles": ["admin", "editor"]
}
}
It instantly generates the Mermaid graph syntax to visualize the relationship between the User node and the Roles array.
Future Plans I'm planning to add:
Support for JSON Schema visualization.
Dark mode toggle.
Feedback Needed! I'd love for you to break it. Paste some complex JSON and let me know if the visualization looks clean or if the recursion gets too messy with deep nesting.
Let me know what you think in the comments! 👇
Top comments (1)
Hey everyone, OP here. If you find any bugs with specific JSON formats, let me know! I'm also working on a Java Code Formatter if anyone is interested in client-side tools for that too.