PUML Class Diagram Editor

Every mainstream PlantUML renderer we tried either timed out, crashed or failed to render a much smaller set of classes than we had.This is unacceptable especially since modern computers can run demanding games or llm's failing to render a couple of 'boxes with arrows' is a joke.

This tool was built to handle the real thing .Hundreds of nodes, complex namespaces, inferred relationships without choking.

A single-file, zero-install browser tool for visualising PlantUML class diagrams as interactive node graphs.

Usage

Open puml-editor.html directly in any browser — no server, no build step required.

1. Click ↑ Import .puml (or drag and drop a .puml file onto the canvas)
2. The diagram lays out automatically using a force-directed algorithm
3. Pan and zoom with the mouse; drag nodes to rearrange
4. Click ⊞ Layout to re-run the auto-layout at any time
5. Click ↓ Export SVG to save the diagram as a vector image

Features

• Parses class, interface, abstract, and enum declarations with full visibility markers (+, -, #, ~)
• Handles quoted fully-qualified names ("package::file.dart::ClassName")
• Renders explicit PUML relationships: composition, aggregation, realization, dependency, association, link
• Infers additional relationships by scanning field and method type annotations
• Connects same-file sibling classes that share no explicit relationship
• Inline editing — double-click a class header to rename, hover fields to edit or delete, add new fields and methods directly on the canvas
• Draw new relationships by dragging between node handles
• Sidebar with diagram statistics, relationship list with filter, and a class browser

Supported PUML syntax

@startuml
set namespaceSeparator ::

class "my.package::MyClass" {
  +int id
  -String _name
  +void doSomething()
}

"my.package::OtherClass" o-- "my.package::MyClass"
"my.package::Base" <|-- "my.package::MyClass"
@enduml

Files

File	Description
puml-editor.html	The editor — everything in one file
diagramApp.puml	Sample diagram (Flutter job-platform frontend)
diagram.svg	the svg out put from the diagramApp.puml

Layout Algorithm — Magnet Physics

The auto-layout runs a custom Fruchterman–Reingold force-directed simulation with a magnet metaphor at its core: every node repels every other node like two same-pole magnets, while every relationship edge acts as a spring pulling its two endpoints together. The system iterates until the competing forces reach equilibrium, naturally spreading related clusters across the canvas rather than stacking everything in a column.

The full pipeline has four phases:

1. Grid seed. Before any physics runs, nodes are placed on a sparse grid whose column and row spacing is derived from each node's actual rendered size (header + field count × row height). Taller nodes get more vertical breathing room from the start, so the initial state is already roughly proportional rather than uniform.

2. Force simulation (220 iterations, cooled). Each iteration applies two forces to every node:

   • Repulsion — a Coulomb-style k² / distance² force pushes all non-adjacent nodes apart. A spatial hash grid partitions the canvas into cells so only neighbouring cells are checked, cutting the cost from O(n²) to roughly O(n·k) and keeping 200+ node diagrams interactive.
   • Attraction — a Hooke spring (stretch × 0.04) pulls connected nodes toward a natural rest length proportional to the diagram's overall scale. A velocity damping factor (0.78) and a linearly-decreasing speed cap (simulated annealing cooling) prevent nodes from oscillating or flying off the canvas.

3. Overlap separation (up to 60 passes). Once the physics settles, the algorithm makes a dedicated bounding-box pass: any two nodes whose boxes overlap — accounting for each node's individual width and height — are pushed apart along the axis of least resistance, with 60 px of extra padding enforced. This guarantees no two tables ever sit on top of each other regardless of how the physics converged.

4. Normalisation. The final positions are shifted so the top-left–most node sits at (60, 60), giving consistent padding around the whole diagram.

Pressing ⊞ Layout re-runs all four phases from the current node positions, which is useful after adding new classes or relationships.

Dependencies

All loaded from CDN at runtime — the file works offline once the page has been opened once and cached.

• React 18
• ReactFlow 11
• Babel Standalone (JSX transform)