Tell AI (elsewhere) to create useful diagrams in Mermaid.js* diagram code, use this to turn them into vector images (SVG). Mermaid is useful for the AI to understand your project, but for YOU to see it, you can use this to make it a visual image.

Framer — Launch websites with enterprise needs at startup speeds.

Launch websites with enterprise needs at startup speeds.

While coding with AI assist, I noticed bigger projects need something more rigid as context so the AI coder doesn't stray away when I try to add new features. You know, to keeps its memory fresh and not change the stuff that already works. The trick is to ask the AI to write a diagram in Mermaid.js format that solidifies the structure of the project and then use that as context to keep the AI reminded at all times what the project is as a whole. This will prevent it from changing things its not supposed to change. This standalone offline web app will convert that mermaid.js code into a visual SVG image so that YOU as a human will be able to understand what the AI think about the structure of your projects so you can see it and fix any misconceptions until the diagram is correct for your project.

This is truely awesome! I'm always struggling to keep my AI coding assistant on track with larger projects – it's like it forgets what it's doing halfway through. The idea of using Mermaid.js to create a visual project structure, then converting it to an SVG for easy human review, is kinda genius imo. It solves that "memory" problem perfectly, right? How customizable is the SVG output for different project styles?

Framer — Launch websites with enterprise needs at startup speeds.

Launch websites with enterprise needs at startup speeds.

Mermaid.js to SVG Converter

See the structure of your projects visually

See the structure of your projects visually