matheuscfrade/arch-flows-visualizer

This repository is a Python based tool that turns structured JSON data into interactive, self contained HTML diagrams showing how a software system's components connect to each other. It started as a skill built for Grok, the AI assistant from xAI, and can also be used on its own without Grok. The generator script reads a JSON file describing an architecture: things like actors, services, storage systems, and data pipelines, along with the connections between them. It then produces a single HTML file that requires no separate build process and no server to run. Styling comes from Tailwind CSS and Font Awesome icons loaded from a content delivery network, so the output file works simply by opening it in a browser. The resulting page organizes components into columns, for example separating actors from services from storage, and numbers the connections between them. Users can click on any listed flow in a sidebar to highlight the specific path it takes through the diagram, or click on individual components to see which connections relate to them. A panel shows step by step explanations of what is happening. Keyboard support is included, letting a user press escape to clear whatever is currently selected. The layout is responsive, meaning it adjusts to fit different screen sizes, and is meant to look presentable enough to use during a presentation. Because the diagram is generated from JSON, it can be version controlled, edited by hand, and regenerated whenever the underlying architecture changes, without touching any diagramming software directly. To use it, someone clones the repository, writes their architecture data following an included schema file, runs a Python generator script pointing at that data, and opens the resulting HTML file in a browser. A reference example based on an application called ToDesktop is included to show the expected format. The project describes itself as usable both standalone and as a Grok skill, and is maintained by a developer named Matheus Frade.