There's a bug in Draw.io that means a call to app.editor.setGraphXml(app.editor.getGraphXml)) isn't cleanly reproducing the diagram. I wonder why that is, possibly there's additional processing or cleaning on either a full file load or write. Individual nodes (proto MxRectange, MxCircle) appear to be recreated very well, but their relationships aren't (represented internally by both a top-level node in the model, as well as an additional object referring to the top level as a property of the sender or receiver in MxNode.edges).
The closest example of what I'm trying to accomplish is swimlanes.io and dbdiagram.io - both amazing tools for taking something defined as code (giving developers all the power of cut-paste etc, as well as uber-easy readability and updates) and producing something visual from it. Interestingly, they focus on code as the input method, both right hand sides (RHS) are essentially read-only. I wonder, why is that?
Looking at Draw.io for a few hours, to the point where I have two panes: code LHS, local draw.io iframe RHS), I think I vaguely understand the problem and am at a point where I can put it down on paper.
The Problem
Start with a blank slate, LHS+RHS. If we add code, we can add a new node to the diagram model, and update the view. Maybe our DSL allows for some metadata to be set, take that and represent it in the model. We store a reference to the model against the token in the AST, and move on. Let's say we now add a node on the RHS, similar procedure, we need to validate in our global map if we have a reference to it in code, and if not, add a declarative line. Hopefully our translation knows enough about the metadata available to express that through the generated code.
Enough
I just made public a repo from 2022, with some Claude edits to productionise it. It feels good to be able to get out of the weeds, or just get unblocked on a fun idea I had back then. These projects are a bit of a graveyard for me - each spun out into a business in my head and I miss the guy who spent hours demo'ing to friends on Zoom during covid, talking through MVPs and ICPs for something with logically zero chance of ever launching.
"If only the world had a modelling tooling for engineers, it would be the next X!"
Make every model interactive, declarative, and programmable.
A bi-directional, dual-representation modeling tool built on draw.io and YAML; editing one updates the other in real time! Comes with an MCP server to assist with no/low-human workflows.
▐▛███▜▌ Claude Code v2.1.76
▝▜█████▛▘ Sonnet 4.6 · Claude Pro
▘▘ ▝▝ ~/modeld
❯ ▎ Using the modeld MCP tools, create a minimal house security threat model with these elements:
▎ - A Thief (actor) outside the house, attempting entry through the Front Door (app)
▎ - A House boundary containing the Front Door and a Bedroom (boundary, trust: high) — the bedroom represents a locked trust zone
▎ - A Safe (app, trust: critical) inside the Bedroom, containing the family heirlooms
▎ Connections: Thief → Front Door ("attempts entry"), Front Door → Bedroom ("path through").
▎ Follow the CLAUDE.md layout guidance to plan coordinates before…I'll venmo the first person to run the docker image and open a Github issue $10.
Top comments (0)