Skip to content

Can AI build me a local self-hosted web based diagram tool?

Objective: I’m revamping my note-taking nvim workflow, and I want the simplest diagram tool. I want full control so I have flexible integration options. Didn’t want to use the cloud version in this instance.

TLDR I tried claude sonnet 3.7 and the result was better than expected.

A prompt about architecture?

are you good at architecture? can you recommend a way to wrap the exalidraw web drawing tool with a personal backend server that saves to a filesystem, ideally local

It recommended a typical architecture with a backend and frontent implementation

Response

I’d be happy to recommend an approach for wrapping Excalidraw with a personal backend server that saves to your local filesystem. Here’s a recommended architecture that aligns with domain-driven design principles: Architecture Overview

Frontend: Use Excalidraw’s React component library Backend: Create a lightweight REST API server Storage Domain: File system persistence layer Authentication: Simple token-based auth (optional)

Let me outline an implementation approach: … Produced:

  • a back-end node express server
  • a react TS front-end.

The backend was ok, no changes needed The front-end didn’t run

Front-end Errors

  • Initial state error with Excalidraw collaborators
  • Infinite updates
  • Overall the initial had poor state management handling

2-3 prompts later it had solved the infinite renders I took a break, came back the next day to manually resolve the other bugs

Initial version Initial drawing list Initial diagram edit

Making it useable

It was almost useable, there is 1 critical bug remaining and a missing feature.

New diagrams used the canvas of the prior diagram.

  • didn’t bother trying a prompt, just debugged this myself.

The diagrams have names but no rename feature

Instead of copying and pasting between the desktop app, I tried the MCP server-filesystem to speed things up a bit. That worked pretty seemlessly.

  • Another prompt later, it had added a modal for rename and a new end-point to patch the name.
  • It didn’t run immediately in front-end, I just fixed minor issues manually in 5 mins.
  • There was inconsistent state again, I wanted logging on the backend, just to save me time, a prompt solved that in 5 mins. I reviewed the logger middleware it added, seemed reasonable. It got a little confused with adding the chalk dep to the correct package.json

It is useable, maybe we are 80% there to have something I could use on a daily basis.

Rename feature

TODO: next 2080%

To use it daily it will needs features to improve search / retrieval.

  1. it’s not pretty, maybe i can prompt my way quickly to a pure css or tailwind
  2. fuzzy search by name
  3. Some web-based acceptance tests would be great, see if these can be generated
  4. hooks into my note workflow
  5. add collections/folders
  6. tags, description
  7. switch to deno and improve the sandbox
    • it gave me the changes, to be implemented