Wired
What is Wired?
Wired is a desktop application that helps software teams visualize and document their system architecture. It enables architects, developers, and technical leaders to create clear diagrams showing how their applications, databases, message queues, and external services connect and communicate. Teams can model their entire technology landscape, from business domains down to individual database tables and API endpoints. The tool includes animated business flow visualization, allowing stakeholders to see step-by-step how data moves through the system during key operations like user registration or order processing. This makes it easier to onboard new team members, plan system changes, and communicate technical decisions to non-technical stakeholders.
Tech Stack:
Wired is an Electron desktop application built with React 18 and TypeScript, using Vite for build tooling. The diagramming canvas is powered by React Flow (@xyflow/react), with custom node components for different entity types including domains, applications, APIs, databases, Kafka clusters, and RabbitMQ exchanges. State management uses Zustand with a hierarchical data model stored as JSON files. The application supports force-directed graph layouts via d3-force, draggable connection waypoints for manual edge routing, and real-time flow animation with animated data flow indicators on active connections. The architecture follows a parent-child relationship model where domains contain applications, applications contain APIs and consumers, databases contain data domains and tables, and message broker clusters contain their respective topics, exchanges, and queues.
Disclosure: This project was built purely for personal use and education. The application and its systems are not deployed for public use, however code access can be requested.
