Developer Tools / Software Architecture · AI Web App
Ghost AI
A collaborative platform that turns a plain-English description into a real system architecture diagram, lets teams edit it together in real time, and generates technical documentation from the finished design.
Challenge
Designing software architecture usually means bouncing between a whiteboard, a diagramming tool, and a separate doc for writing everything up afterward. Every time the design changes, someone has to remember to update the documentation, and that step gets skipped or delayed more often than not. Existing diagram tools let teams draw together, but none of them help generate the architecture in the first place or turn the finished diagram into real documentation.
Solution
I built Ghost AI as one workspace that covers the whole flow: describe a system in plain English and AI drafts the services, databases, and connections directly on a shared canvas. Teams edit that canvas together in real time, and one click turns the finished diagram into a structured Markdown spec, so the documentation is generated from the actual design instead of written separately and left to go stale.
Project Overview
Ghost AI is a collaborative platform for designing software architecture. Instead of switching between a whiteboard, a diagramming tool, and a separate document, teams describe a system in plain English, watch AI draft it on a shared canvas, refine it together in real time, and generate technical documentation from the finished design, all in one workspace.
I built it as a full-stack Next.js application combining AI-generated diagrams, real-time multiplayer editing, and automatic Markdown documentation.
The Problem
Architecture diagrams and technical documentation rarely stay in sync. Every time a system design changes, someone has to remember to go update the docs, and that step is the first thing to get skipped when a team is under deadline pressure.
Collaboration tools don't solve this either. Most diagramming apps let multiple people draw on the same canvas, but none of them help generate the architecture in the first place, and none of them turn a finished diagram into real technical documentation. Teams end up maintaining the diagram and the docs as two separate, disconnected artifacts.
The Solution
Ghost AI is built around a single shared canvas that covers the whole workflow: describe the system, let AI draft it, refine it together, then generate documentation directly from what's actually on the canvas.
Signing In And The Pitch
The sign-in screen doubles as the pitch: "Design systems at the speed of thought." Right next to the login form, three feature callouts (AI Architecture Generation, Real-time Collaboration, Instant Spec Generation) tell a new user exactly what they're about to get, before they've even seen the product.
Authentication runs through Clerk, with Google and GitHub sign-in alongside a standard email flow, so getting into a workspace takes seconds.
Designing With Plain English
The core AI feature lives in a dedicated "AI Workspace" panel next to the canvas. A user can type a plain description, "design an e-commerce backend" or "build a CI/CD pipeline", and Ghost AI generates the matching services, databases, and connections directly as nodes and edges on the canvas.
Suggested prompts are shown up front for anyone unsure where to start, and the same panel switches to a "Specs" tab once a design exists, turning it into documentation (more on that below).
Starting From A Template
Not every project needs to start from a blank canvas or a prompt. Ghost AI ships with six ready-made architecture templates, Microservices, CI/CD Pipeline, Event-Driven System, Three-Tier Web App, SaaS Multi-Tenant Backend, and Realtime Messaging System, each with a preview and a one-click import.
Importing a template replaces the current canvas with a working starting point that a team can immediately start customizing instead of drawing from scratch.
The Shared Canvas
Whether a diagram comes from an AI prompt, a template, or manual editing, it lives on the same React Flow canvas: draggable service nodes, labeled connections, and a toolbar of shape tools for adding custom nodes by hand.
The project sidebar keeps every workspace ("My Projects" and "Shared") one click away, so switching between architectures in progress doesn't break flow.
Real-Time Collaboration And Sharing
Every change on the canvas syncs instantly through Liveblocks, so a team editing the same architecture sees each other's moves live instead of working on separate copies and merging later.
Sharing a project is built around the same real-time model: a "Share" panel generates a link, lets you invite people by email with a specific role (like Viewer), and shows exactly who currently has access.
From Diagram To Documentation
This is the feature I'm most proud of. Instead of asking someone to manually write up the architecture after the design is done, Ghost AI converts the entire canvas into a structured Markdown technical specification with a single click, in the same "AI Workspace" panel used to generate the design.
Because the spec is generated directly from the current canvas, it can never drift out of sync with the diagram the way manually maintained docs do. Generated specs are stored with the project and downloadable at any time.
Content Structure
Ghost AI is organized around one core object: the project.
The platform includes clear areas for:
- Project creation and management
- The shared architecture canvas
- AI-generated diagrams and templates
- Real-time collaboration and sharing
- Generated technical specifications
Keeping everything scoped to a project made it straightforward to add sharing, permissions, and documentation generation without restructuring the core data model.
The Result
Ghost AI turns a workflow that used to span three or four disconnected tools, a whiteboard, a diagramming app, a docs page, and a chat thread for feedback, into one shared canvas. Teams can go from a plain-English idea to a reviewed architecture with generated documentation without ever leaving the workspace.
Key Takeaways
The hardest part of this project wasn't the UI, it was making AI generation, real-time collaboration, and background documentation processing all feel like one seamless experience instead of three separate features bolted together. Users needed to keep editing the canvas while AI worked in the background, without anything blocking or feeling disconnected.
For Ghost AI, that meant building a reliable sync layer between live user edits, AI-generated content, and stored project data, and testing it carefully enough that the "magic" of AI-generated architecture never comes at the cost of reliability.
Results
- Replaced whiteboard-then-diagram-tool-then-doc workflows with one shared canvas that covers design, collaboration, and documentation.
- Built AI architecture generation that turns a plain-English prompt into services, databases, and connections directly on the canvas.
- Added 6 ready-made system design templates (Microservices, CI/CD Pipeline, Event-Driven System, and more) so teams don't start from a blank canvas.
- Implemented real-time multiplayer editing with Liveblocks, so every change appears instantly for every collaborator on the canvas.
- Built one-click Markdown specification generation, so documentation is always generated from the current design instead of written separately.
- Added project sharing with invite-by-email and role-based access, so architecture reviews don't require exporting screenshots.
- Delivered a full authentication and project management system with Clerk, so every workspace is private and access-controlled by default.
