me
Published on

diagramat: Building a Modular Diagram Editor with AI

Authors
  • avatar
    Name
    Omer Atagun
    Twitter

I didn’t plan to build a diagram editor.

I planned to test how far I could go building software with an AI pair programmer. The kind that never sleeps, doesn’t judge your bad naming conventions, and never asks “can this be a meeting?”

Three evenings later and about 60 commits in, I had something running at diagramat.omeratagun.net. Six hundred commits later, it even had things like arrows, copy/paste, snapping, rotation, and… sanity.

This post is the story of how I used OpenAI Codex to architect and build a modular, draw.io-style SVG diagram editor—without a framework, without a team, and mostly without swearing (except at getBoundingClientRect()).

Codex as a Junior Dev You Actually Keep

We’ve all used Copilot or ChatGPT and yelled:

"No, I didn’t mean THAT!"

But Codex? Codex is different if you treat it right. I kept my prompts clean and contextual:

  • Write your AGENTS.md, otherwise it will go delusional. Write it like you’re explaining to a junior dev.
  • “Refactor resizeNodes.ts to ignore arrows.”
  • “Add snap-to-grid support when dragging nodes.”
  • “Make right-click show a context menu to delete or duplicate.”

And it delivered. Like an intern who doesn’t know CSS, but somehow learns TypeScript overnight.

✨ The trick? I didn’t use it for everything—I used it consistently for the boring stuff, and always reviewed what it wrote like a hawk with coffee shakes.

The Architecture: For Me, For Codex

The repo is a strict TypeScript monorepo with zero frameworks and maximum legibility.

  • @diagramat/core: Models and types. Your safe zone.
  • @diagramat/renderer-svg: Turns a Diagram into actual SVG DOM elements.
  • @diagramat/interactor-core: Mouse logic like drag, connect, resize, select.
  • ui-shell/vanilla: A no-frills Vite + Tailwind UI to test things and click around like it’s 2008.

This split made it easier for Codex to focus. No magic hooks, no hidden state, no tears.

3 Evenings to Something Useful

✅ Evening 1: Render shapes, drag nodes, zoom + pan ✅ Evening 2: Add connectors (arrows), inline label editing, basic resizing ✅ Evening 3: Connect mode, grouping, JSON export, basic toolbar

It worked. And then I kept going.

By commit #600, Diagramat had:

Features That Made It Actually Feel Like a Real Tool

Here are the big ones—the ones that turned a canvas into an editor:

🔌 Connect Nodes

Click or drag from a handle to create lines or arrows between shapes. Codex helped snap edges to the nearest point. I helped it not snap to infinity.

🖱️ Multi-Select + Drag

Hold Shift or Ctrl and you can wrangle multiple nodes like herding cats. Group them. Move them together. Undo your regrets.

✂️ Copy + Paste

You can copy and paste nodes and edges like it’s 1999. Thanks, Ctrl+C.

🧲 Grid Snapping

Snaps nodes to a 20px grid. Because nothing screams "professional" like pixel-perfect spacing.

⛶ Resizable Nodes

Drag corners to resize. If the shape allows it (arrows don’t, they have dignity). Each node carries its own resizable flag.

🎯 Drag-to-Connect

Grab the little handle on a node. Drag it onto another. Voila—edge created. And it even snaps. Mostly.

💬 Inline Text Editing

Double-click a node or edge and edit its label right there. No modals. No surprises. Just you and your keyboard.

🖱️ Right-Click Menus

Delete, duplicate, or just feel powerful. Codex didn’t know what a contextmenu was, but we figured it out together.

🌍 Zoom + Pan

Hold Ctrl to zoom. Middle-mouse drag to pan. (Or just get a bigger monitor.)

🧾 Import/Export: JSON, SVG, XML, PNG, PDF

Because what good is a diagram if you can’t save it and email it to someone with “pls fix” in the subject?

🔍 Search + Filter

Need to find that node labeled “WeirdBox42”? Type in the search bar. We’ve all been there.

🧭 Minimap

Move around large diagrams with a tiny map in the corner. Great for feeling like you’re controlling a spaceship.

🔒 Lock Nodes

Mark stuff as locked so you don’t mess it up by accident. Especially useful for background templates.

🔄 Node Rotation

Yes, you can rotate nodes. Yes, it’s surprisingly useful. No, I didn’t expect to implement it, but here we are.

Refactoring for Robots

As I went deeper, I realized: if I wanted Codex to not hallucinate, I needed to help it help me.

So I:

  • Wrote small, purpose-driven files
  • Added comments like “this handles only corner-based resizing”
  • Gave each shape and interaction a dedicated module
  • Avoided cleverness unless I wanted Codex to get clever right back

Every 10–20 commits, I stopped, reviewed the mess, and cleaned up. Not because I wanted to, but because AI is only as good as the codebase you feed it.

What I Didn’t Expect

  • How fun it is to build diagram tools. Like, dangerously fun. You fix one thing and end up inventing “connect mode” at 2AM.
  • How productive Codex can be with proper structure and prompts.
  • How far you can go without a frontend framework. Vanilla JS, SVG, and TypeScript are weirdly satisfying. Yes i did say i will not use vanilla TS as a UI but i did it anyway.

What’s Next?

  • Snap guides like Figma or draw.io
  • Real-time collaboration (maybe)
  • Plugin system for custom shapes and logic
  • Well i will just keep adding features until it feels like a real tool

Final Thoughts

If you treat AI like a senior dev, it’ll disappoint you. Do not expect it to write your entire app or understand your domain perfectly.

If you treat it like a diligent intern with infinite energy and no ego—it’ll surprise you.

I used OpenAI Codex, a bit of stubborn engineering, and a clear mental model to ship a tool I’m genuinely proud of.

And hey—it’s live. It’s fast. It’s modular. And I didn’t even need a framework.

👉 Try it: diagramat.omeratagun.net

And if you’re wondering what to build next? Maybe start with a box. Then connect it to another. Then see where the line takes you.

NOTE: As its obvious, this post is crafted with the help of AI, thats why there are many emojis.