A VS Code-style project explorer inside the editor

DiagramaHub v0.5.10 adds a persistent explorer to the editor: create diagrams inside folders, rename folders and move diagrams around with drag and drop.

Once a project grows from five diagrams to thirty, the hard part stops being drawing and starts being finding things. Jumping from the editor back to the project list, hunting for a diagram and coming back again breaks your focus. In version 0.5.10 we brought the project structure to where you actually work: the editor.

An explorer that stays with you

If you use VS Code, this will feel familiar. The desktop diagram editor now has a persistent project explorer showing your project tree: the diagrams at the root and your folders with their contents. You can open another diagram without leaving the editor and without losing track of where everything lives.

We also fixed a detail that made it awkward to use: interacting with the explorer no longer closes the panel as if you had clicked outside of it.

Organize without leaving the editor

Beyond navigation, the explorer lets you keep your project tidy:

Create diagrams directly inside a folder, instead of creating them at the root and moving them afterwards.
Rename folders when the name you picked on day one no longer describes what's inside.
Move diagrams with drag and drop between the project root and folders.

Folders are still one level deep. That's on purpose: a flat hierarchy stays easy to scan and avoids deep trees where nobody can find anything.

flowchart TD
    P[Project] --> R1[Diagram at the root]
    P --> C1[Backend folder]
    P --> C2[Database folder]
    C1 --> D1[Login sequence]
    C1 --> D2[Service architecture]
    C2 --> D3[DBML schema]
    R1 -. drag and drop .-> C1

Fit to screen, properly centered

Another change you'll notice day to day: fit to screen now frames the diagram using the actual bounds of the rendered SVG. In practice, D2 diagrams are now centered correctly, which wasn't always the case before.

An About page

We added an About page inside the app with product details, a link to the GitHub repository, our X account and a contact email. Whether you want to report something, pitch an idea or just read the code, every path is in one place.

Dependencies, refreshed

This release also updates frontend dependencies, including Mermaid 11.16.0 and DOMPurify 3.4.12, and refreshes transitive dependencies. As a result, npm audit reports 0 vulnerabilities across both production and development dependencies.

Try it

Open any diagram in DiagramaHub Cloud and organize your project from the explorer. If you self-host, upgrade to 0.5.10. Technical details are in the changelog.