AI Architecture Diagrams: How I Built Codelit Solo

I was drawing an architecture diagram in Lucidchart for the third time that week. Same boxes, same arrows, same 40 minutes of dragging things around. The diagram was already outdated by the time I finished it because someone had merged a PR that changed the queue topology.

I closed the tab and thought: I can describe this entire architecture in two sentences. Why am I spending my time being a human Visio renderer?

That's where Codelit started.

Codelit

is an AI architecture tool that turns a plain-English description of a system into an interactive diagram you can click, edit, break on purpose, and export. It now does the same trick for product boards and agent workflows.

The first version of Codelit was a text input, a button, and GPT-3.5 on the backend. You'd type "design a URL shortener" and it would spit out Mermaid syntax. I'd render that Mermaid into an SVG and call it a day.

It looked terrible. The Mermaid output was wrong about 40% of the time: invalid syntax, missing semicolons, nodes that referenced nothing. I spent more time debugging generated Mermaid than I ever spent in Lucidchart.

But people got it immediately. I showed three engineer friends and all of them said some version of "wait, can it do [thing I'm working on]?" That reaction is how you know you're onto something real.

Mermaid renders static SVGs, and Codelit needed a canvas you could click on, drag around, edit, and extend. That one requirement killed Mermaid and turned the next decision into a straight comparison of three ways to draw an interactive graph in a React app.

I actually tried the raw canvas route for a weekend before writing it off. Drawing boxes is easy. Everything after drawing boxes is the entire product.

The real pivot was parsing AI output into React Flow's node and edge format instead of Mermaid syntax. I wrote a parser that takes the AI's structured JSON response and converts it into { id, type, position, data } nodes and { source, target, animated } edges. That was harder than it sounds, because the model has no idea about pixel positions, which is how I ended up building a layout engine on top of the interactive canvas.

Codelit runs on Next.js with the App Router, Zustand, React Flow, and Firebase. Every one of those choices was made under the same constraint: I'm a solo developer, so anything that costs me a week of setup has to earn that week back almost immediately.

Next.js (App Router). SSR matters for SEO. I want "system design URL shortener" to rank on Google, and server-rendered pages index better. The app router gives me server components for the blog and marketing pages, and client components for the interactive canvas. I also get API routes without standing up a separate backend.

Zustand over Redux. Codelit runs on a handful of stores: canvas state, AI generation state, user preferences, template data, undo/redo history, and UI panels. Redux would mean a slice each with actions, reducers, selectors, and a wall of boilerplate. Zustand is create((set) => ({...})) and you're done. For a solo dev, the reduced cognitive overhead is massive.

// This is literally how simple a Zustand store is
const useCanvasStore = create<CanvasState>((set, get) => ({
  nodes: [],
  edges: [],
  addNode: (node) => set({ nodes: [...get().nodes, node] }),
  updateNodePosition: (id, position) =>
    set({
      nodes: get().nodes.map((n) => (n.id === id ? { ...n, position } : n)),
    }),
}));

React Flow (@xyflow/react). Already covered above. It's the right tool for node graphs. D3 is the right tool for charts. Know the difference.

Firebase. Auth and database in one SDK. I didn't want to run a Postgres instance, set up migrations, manage connection pools, or deal with auth middleware. Firebase Auth handles Google and GitHub sign-in. Firestore stores diagrams as documents. It's not the cheapest at scale, but for a product finding market fit, speed of iteration beats cost optimization.

Codelit didn't start as an architecture tool. The original idea was a coding education platform: interactive coding exercises with AI hints. I built about 30% of that before realizing the architecture diagram feature I'd hacked together as a "bonus feature" was getting more usage than the actual coding exercises.

I killed the education platform and went all-in on architecture generation. This was scary because I'd spent two months on the education features. But the data was obvious: people were sharing the diagrams, not the coding exercises.

Three things nearly sank Codelit: AI output that was architecturally wrong for the first three months, a node layout algorithm that took six rewrites, and a launch price copied from a product with a completely different usage pattern. I want to be honest about these because most "how I built X" posts skip the painful parts.

The AI output wasn't "needs minor tweaking" bad. It was "suggests putting a load balancer behind the database" bad. Fixing it meant sitting down with hundreds of generated diagrams, tagging what was wrong, and tuning the system prompts against that. The generation pipeline that came out of it is a post of its own.

Converting unstructured AI output into well-positioned nodes on a canvas is genuinely hard, and six rewrites is not an exaggeration. Grid placement looked robotic. Force-directed layout overlapped constantly. Dagre plus custom spacing rules is where I stopped, and it still needs manual adjustment for certain topologies.

Pricing was the one that stung, because it was the one I could have reasoned my way out of. I launched at $19/month because I looked at what Lucidchart charges. But Codelit isn't Lucidchart. It's a tool engineers reach for on specific tasks, not all day every day. $19 felt expensive for something you use a few times a month. I dropped to $12, then eventually settled at $5/month with a 7-day trial, and conversions jumped. The full growth story, with the real numbers, is separate.

For the first couple of years, Codelit was about drawing systems. Then everyone I know started trying to build AI agents, and they all hit the same wall: the demo works in an afternoon, and then you spend three weeks fighting tools, permissions, model routing, and what happens when the agent does something dumb against a real system.

That's a design problem, which is exactly what Codelit was already good at. So I built an agent workflow engine on top of the same canvas.

You describe the job once. Something like "a Slack agent that triages engineering requests, checks GitHub and Notion, asks before it writes anything, then posts a sourced answer." Codelit turns that sentence into a real spec:

• Skills: reusable instruction packs with activation rules and risk labels
• MCP servers with explicit tool, resource, and prompt boundaries
• Tools wired to Slack, GitHub, Notion, Linear, and the rest
• Triggers for what fires the workflow: a Slack mention, an inbound webhook, a schedule
• Model routing so cheap models handle classification and stronger ones handle planning, with fallbacks for when a provider goes down
• Approval gates that actually pause the run and wait for a human before anything irreversible
• Secrets pulled from an encrypted vault at run time, never pasted into a step
• Eval harnesses so you catch regressions before you ship

You dry run it. Codelit simulates the whole flow step by step without calling a single real model or tool, so you can watch the logic play out and find the step where your agent quietly does something insane, before it costs anything.

A live run executes on real models with the approval gates in place, grounded in read-only reads from GitHub, Jira, Linear, or Notion, and shows you what the run actually cost against the estimate. When it works, you export an agent repo pack: runbook, approval policy, MCP config, model routing, a starter orchestrator, CI evals, and the best live run baked in as a fixture that replays on every commit.

Then you can hand the whole thing to Codelit to run. Hosted scheduled runs fire your workflow on a schedule against real models, with no tab open and no API keys of your own. Any step that needs a person emails you an approve-or-hold link, and an approved run picks back up from its checkpoint. Every run is capped at twelve steps and a dollar of model cost, so an agent can never quietly run up a bill. Approvals live in your inbox today, with Slack next.

The through-line hasn't changed. Whether it's a system diagram, a product board, or an agent, the pitch is the same: design the thing properly before you build it. AI can write the code now. The scarce skill is deciding what the code should be.

Codelit is three products sharing one input: architecture diagrams, product boards, and agent workflows, all generated from the same plain-English description. The template library has 90+ pre-built architectures (Uber, Netflix, Stripe, and more). The AI routes across every major provider with automatic fallback, so a single outage never takes generation down.

There's a chaos mode that simulates cascading failures, a cost estimator for rough cloud spend, and a stack of audit tools for security, resilience, and performance.

It stays free to start, with a daily allowance of generations and a few live runs a day on real models. Pro is $5 a month, and Max is $15 for people leaning on hosted automation. It's still a one-person product, I still push code every day, and the roadmap is driven by what users ask for in the feedback widget.

Three things: start with the canvas instead of Mermaid, charge from day one instead of running a free beta, and start writing content in month one rather than month three. All three are timing mistakes, which is the only kind of mistake a solo builder can't buy their way out of.

Start with the canvas, not Mermaid. The Mermaid detour cost me three weeks. I should've gone straight to React Flow.

Write content earlier. Blog posts drive 70% of my signups. I didn't start writing until month 3. If I'd started writing system design guides from day one, I'd be months ahead on organic traffic.

If you want to see what all of this turned into, try it yourself. Generate an architecture, break it with chaos mode, export it. It takes about 30 seconds to see if it's useful to you.

And if you're building a solo SaaS and want to compare notes, I'm always down to talk. Shipping this thing has taught me more than any course, any book, or any job I've had, mostly because a course never tells you that you were wrong and users do it within the hour.