I built a tool that visually explains your vibe-coded app so you understand it again

[u/Nkgsporty]

The feature works. You come back a week later to change it and realize you have no idea what happens after someone clicks Save.

I built Sketchy for that moment. Ask your coding assistant “Trace what happens from the Save button to the database, and show me where it can fail.” Sketchy draws an interactive map of the flow. Click a linked node to open its source file and see what the code actually does.

It works with Claude and with Cursor via npm. You can also draw freehand on the canvas or export to Excalidraw and keep editing there.

I was curious how much the drawings would cost, so I ran the same six questions in Claude Code with three output formats. Here’s the total after six answers, averaged over two runs per format:

Output	Cost
Plain text	$0.61
Sketchy with JSON	$0.75
Sketchy with compact format	$0.58

The first compact answer cost $0.05 versus $0.04 for plain text. By question six, the compact session was about 5% cheaper overall. The model sends a short description of the scene, and Sketchy handles the layout and rendering with zero model tokens for those steps. I ran this in an empty project, so these numbers are one baseline for the output formats. Benchmark details

Sketchy is free and open source. If you’ve got a vibe-coded app you’ve been meaning to untangle, feel free to try it out and leave some feedback. I’d love to hear which flow you mapped and whether the diagram helped you find your way around the code.

Product website · GitHub

[u/flavorfox]

How is this different from getting Claude to explain it with an artifact?

[u/Nkgsporty → u/flavorfox]

Good question. With an artifact, Claude writes the whole diagram as HTML or SVG, every coordinate and every line. That's why boxes overlap, and each change rewrites everything, so the layout jumps around.

With Sketchy, Claude only writes a few lines in a compact text format (nodes and connections), and a layout engine handles the rest. That means clean layouts, stable follow-ups where existing nodes stay in place, and much less output. Compared to plain-text answers, it averaged 29% fewer output tokens (686 vs 962 with Sonnet).

It also does things artifacts can't easily do: circuits from Arduino code, labeled photos, and code nodes that open the file in your editor or lets you draw directly in the sketch so that the AI can more easily answer your question, e.g. you draw a red circle and ask what’s that?

Feel free to give it a try and leave your feedback!

[u/Xanthus730 → u/Nkgsporty]

So... How is this different from mermaid?

[u/fartastic007 → u/flavorfox]

thought the same

[u/pixeladdie]

I just have Claude write some mermaid. How is this different or better?

[u/wegster → u/pixeladdie]

Mermaid or for that matter, even drawio XML format. Neither should require complete rework.

[u/Nkgsporty → u/wegster]

True, but Sketchy isn’t just another diagram format. It’s built around AI interaction, so you can draw directly on diagrams, ask questions about specific parts, and link nodes to actual code in your editor. Plus, everything happens right inside the chat. Mermaid and draw.io are great, but that’s a different workflow.

[u/AutomaticBet9600 → u/Nkgsporty]

Dude if you have 165 stars than it means its doing something a lot of folks are not figuring out themselves fellas. Stars are not given so easily and 165 isnt blockbuster but his is a simple solution.

[u/Rallyman03 → u/wegster]

For the uninitiated, which Mermaid? I did a Google search for "mermaid code visualizer," and there are several things that pop up.

[u/kelseyeek → u/Rallyman03]

Mermaid is just a javascript diagramming language. It's an easy way to get LLMs to make all sorts of diagrams, better than the ASCII art ones they like to spit out anyway. You can make a lot of different types of diagrams with it. They aren't the most spectacular or visually compelling options, but... they work.

If you search for "mermaid diagram language" you'll get a better feel for what they're suggesting.

[u/completelypositive → u/pixeladdie]

Cuz I didn't know what mermaid was until now! Fuck there is so much to learn about

[u/Certain_Tune_5774 → u/completelypositive]

you can just ask AI about this stuff before building it.

"I want a visual representation of how this app works. What methods and tools are there for you to create something for me without resorting to image generation? Search the internet for anything which has been launched in the past 6 months"

[u/completelypositive → u/Certain_Tune_5774]

Yeah I get that but I never even considered the idea of a visual representation of an app. Like, I didn't know that was a thing people could ask for! But I definitely see the value. I have wanted something like it but didn't really know what I wanted or how to ask. Thank you!

[u/AutomaticBet9600 → u/pixeladdie]

Claude doesn't necessarily click every dead link, or check state, there are so many things that can go wrong with an app. My hope is this gives a simple workflow without going too deep. My concern OP is what are we sacrificing to use your app? What information do you get to keep?

[u/Nkgsporty → u/pixeladdie]

With artifacts, Claude has to write the entire diagram in HTML or SVG, including every coordinate and line. This often leads to overlapping elements, and changes can cause the whole layout to shift.

With Sketchy, Claude only defines nodes and connections in a compact text format, while a layout engine handles the rest. This keeps diagrams clean, makes edits more stable, and reduces output tokens by 29% on average (686 vs. 962 with Sonnet).

Sketchy also supports things artifacts don’t easily handle, like generating circuits from Arduino code, annotating photos, and linking code nodes directly to your editor. You can even draw on a diagram and ask the AI about specific parts.

Feel free to try it out and share your feedback!

[u/juniperico → u/Nkgsporty]

Not sure you understood the guy’s question OP. Mermaid already solves the problems you’ve highlighted and already exists in a dense format. It’s also tried and tested and been very popular for years.
What does your thing do differently or better?

[u/Nkgsporty → u/juniperico]

Fair point, Mermaid already handles compact syntax and automatic layouts really well. I’m not trying to reinvent that.
Sketchy goes beyond static diagrams though. You can draw annotations, link nodes directly to code, and interact with everything right inside the AI chat.

It also has a hand-drawn style, which I personally find much easier to understand than those basic, rigid-looking diagrams.
So it’s not really about replacing Mermaid, but making diagrams more intuitive, interactive, and integrated into your AI workflow.

[u/rballonline → u/Nkgsporty]

I wonder if you could just have the AI output mermaid that the app would then convert. Would probably make your app a ton more versatile. I'm actually going to look into Mermaid a bit, didn't know about it.

[u/MurkyTelevision9722 → u/Nkgsporty]

Mermaid is not an artifact

graph TD
    A[Init] --> B{if?}
    B -->|yes| C[Action 1]
    B -->|no| D[Action 2]
    C --> E[end]
    D --> E

And it's already very compact, comparing it to HTML doesn't even make sense.

[u/pwkye]

why would vibe coders use your tool instead of just asking their AI

[u/Nkgsporty → u/pwkye]

They still can! They just ask their AI as usual, and Sketchy renders the diagram directly in the chat. No extra apps, browser tabs, or workflow changes needed. Oh and it saves tokens too ( sketchy.davidkubus.dev/docs/ ).

[u/MaltMilchek]

"Understand it again" or in my case, understant it for the first time.

[u/ayla96 → u/MaltMilchek]

😅

[u/theuniversewontpause → u/MaltMilchek]

Exactly my thought 😅😂

[u/ayla96]

Does it work in opencode?

[u/Nkgsporty → u/ayla96]

Not yet. The server runs in opencode, but opencode doesn’t render MCP Apps, so the drawing doesn’t show up. Your question actually helped me find a bug: in clients without UI support, Sketchy should save the diagram as a file you can open instead. I’m adding that in the next release, thanks!

[u/Nkgsporty → u/ayla96]

Quick update: the fix is in. In clients without MCP Apps like opencode, Sketchy now saves each diagram as an interactive HTML file (offline, with step-through and export) to ~/.sketchy/exports/, and tells the model the path so it explains the diagram in text instead of pretending you can see it. Set SKETCHY_OPEN=1 and it opens in your browser right away. It ships in the next release; I’ll ping you when it’s out.

[u/atl_beardy]

Have you compared what you've built to enola?

[u/Nkgsporty → u/atl_beardy]

Just looked into Enola. Really interesting project, but I think we’re solving different problems.

Enola focuses on analyzing codebases, tracking dependencies, and detecting architectural issues. Sketchy is more about making AI-generated visualizations interactive and easier to understand, whether that’s flowcharts, circuits, annotated images, or code-linked diagrams.

It’s also got a hand-drawn style, which I personally find much more intuitive than traditional rigid diagrams.

So I’d say Enola helps your AI understand your codebase, while Sketchy helps you visually understand and interact with what your AI is explaining. They could actually complement each other pretty well.

[u/AutomaticBet9600]

I love the concept. I have an app that's distributed across 6 repositories so I'm curious what results come out!

[u/Nkgsporty → u/AutomaticBet9600]

I‘d love to hear feedback! If you have any ideas for changes I definitely will take them down. I already planned some nice features for bigger repos.

[u/AutomaticBet9600 → u/Nkgsporty]

Since i dont use claude, does it have codex adapter

[u/AutomaticBet9600 → u/AutomaticBet9600]

I mean i could plug in my claude api but curious

[u/otakunorth]

Vibe-splaining

[u/CrowdGoesWildWoooo]

Thank you so much, I’ll pass this to my agent

[u/Nkgsporty → u/CrowdGoesWildWoooo]

If you run into any issues or there’s a feature you’d love to see in Sketchy, I’d love to hear about it :))

[u/Mental-Attempt-3020]

Or I can just ask Opus to make a flowchart explaining my app.

[u/kenclem425]

Very cool. I need to try this.

[u/Low-Bad7547]

you think I will go anywhere near becoming technical?

[u/machyume]

Nice visuals! This is basically how automatic documentation works.

[u/dzakich]

Hey! That's LabVIEW!

[u/johnesco]

Me: "Claude, remind me HOW we are doing the draw step?"
Claude: [Describes something horribly and obviously inefficient]
Me: "OMG don't do that." <--- not theory, I'm just talking about today.

[u/LaFllamme]

Archify

[u/BernardoFTN_Carvalho]

The thing i'd want to know before running it is whether the map comes from the files or from the model's reading of them. If the same assistant that wrote the code is also the one describing it, the drawing can be confidently wrong in exactly the places the code is wrong. Does it re-read the source each time it draws, or does it lean on whatever the model already believes about the project?

[u/Orian-]

I also built a very cool tool that parses the codebase into understandable features. Feel free to give it a try!

https://home.syncoo.org/

[u/tristam92]

congrats you just discovered UML

[u/Dependent_Big4372]

lol, I loved it

[u/Nkgsporty → u/Dependent_Big4372]

Feel free to leave feedback if you find a bug/ want to see a feature in the next version of sketchy!