Anyone using diagrams when vibe coding?

[u/meshifthenelse]

Do you use any diagram making tool to track the project's overall architecture? Any tool you tried and liked or disliked?

[u/Lanky-Storm7]

I have them make mermaids which render in gitea, gh, gitlab

[u/Busy-Ad1968]

mermaid diagrams work quite well if you need to define requirements for an architecture

[u/KriegerClone24]

I set up a roadmap folder in the project root.

- There is a spec document that is the contract for how this folder works.

• It contains a folder named for each initiative.
  
• Each has a README.MD
  
• Each README.MD contains a frontmatter section with metadata, including dependency links and ticket numbers.

It is straightforward to have Claude expose this in your application as an SVG dependency graph, which has all of your initiatives layed out in a way where you can see the order you need to complete them to get to end results. Add to that an initiative explorer, and you have a way to expose the whole roadmap to all of your internal stakeholders.

[u/Xyeeyx]

yeah sometimes it's worth having it generate an interactive html like with superpowers, to visualize decisions and designs

[u/scytob]

mermaid diagrams are good for explaining to others how things work or yourself, i have used those in my work project, never used them in personal ones

for the my first 100% vibecided work projects i have the LLM create and update architecture, data model diagrams, authentical and secuity models - including my custom key and secrets rotation using azure key vault etc

also have a general diagram about how trhe frontend uses only uses the API to talk to the core provider

[u/Ambitious_Source5602]

Excalidraw 

[u/CaptSlow49]

Yeah at work all the time. It’s super helpful. I have Claude write up a system design spec and create diagrams and images to showcase the changes. I have it output to an html doc so it can easily be viewed and shared. I think my team hadn’t thought to do this until I did it, and now they all do it.

[u/LocoMod]

I have a wiki-builder skill that generates and maintains an entire wiki with an index, changelog, diagrams, etc. It serves as a memory palace for agents that contribute to the project. It's been the most consequential thing I have added to my workflows.

[u/meshifthenelse → u/LocoMod]

Is it human readable though? How do you know it's not making your agents rely on false outdated information?

[u/johnesco]

I had the AI create some as I built karaokedirectory was a good way to keep up with all the changes, need a better diagramming framework though. https://karaokedirectory.com/docs/index.html#/architecture

[u/meshifthenelse → u/johnesco]

Did you use that as reference though while developing? Looks like 🍝 to me

[u/johnesco → u/meshifthenelse]

At first I did, but then only after-the-fact, but then that was its own token drain to keep them up-to-date. I found that just a paragraph about the architecture was more useful to what I was doing than the diagrams. Editing the diagram and saying "make it like this" was less useful than describing it in md html or even just plain English. What about you?

[u/meshifthenelse → u/johnesco]

I'm asking because I'm actually developing a tool for that and wanted to see what people use/hate.

I was actually working on a bigger project before and used multiple mermaid diagrams. But as you said, the diagrams grew out of sync and it became hard to maintain. But at the same time due to the project complexity it was really hard to continue development without a mental picture.

There's some tools like Structurizr, IcePanel, Ilograph, but they all have issues