Blog

A renewed explorer and a production image for self-hosting

DiagramaHub 0.7.0 redesigns the file and folder explorer, smooths out switching between diagrams and ships a 68 MB production image for the frontend.

Once a project grows from ten diagrams to fifty, the explorer stops being a detail and becomes how you work. Until now the file tree only let you delete; everything else meant dragging things around or going to another screen. In version 0.7.0 we rebuilt it from the ground up, along with how you switch between diagrams and how the frontend gets deployed.

An explorer that works with mouse and keyboard

Every diagram now has an action menu (the ⋯ button or right-click): rename, duplicate, move to a folder, move to another project and delete. Folders get their own: new diagram inside, rename and delete. Empty folders offer a "New diagram here" shortcut.

What you'll notice day to day:

  • Inline rename with F2 or double-click, for diagrams and folders.
  • Move to a folder without dragging, straight from the menu. It works on mobile too.
  • Ctrl/Cmd+B toggles the explorer (inside the description editor it's still bold).
  • Pin the panel with the pushpin: it stays open when you click elsewhere and across reloads.
  • Keyboard navigation: arrows to move and to open or close folders, Home/End, a single Tab stop, and Shift+F10 to open the row menu.

The explorer also pushes the content instead of covering it, so your code, the preview and the status bar always stay visible. You can resize it between 200 and 480 px (double-click resets it), and DiagramaHub remembers that width and which folders you left open in each project.

It's easier to scan, too: folders first, a badge per diagram type (MMD, PUML, D2, DBML, DRAW), the full title on hover and a result counter while searching ("3 of 24 diagrams"). And search no longer hides matches sitting inside collapsed folders.

Switching diagrams without the flicker

Opening another diagram from the explorer used to make the whole editor vanish while its parts loaded out of step. Now the workspace is covered with a "Loading diagram…" indicator and revealed all at once, with a fade, once the new diagram is drawn.

Along the same lines, creating, moving, renaming or deleting from the explorer no longer reloads the entire editor: the change shows up instantly and, if it fails, it's rolled back with a notice. We also stopped the editor from re-rendering every second because of the status bar clock, and the preview no longer goes blank for a moment on each render.

A production image for the frontend

If you run DiagramaHub on your own infrastructure, this part is for you. The frontend now has a production image: a static site served by Nginx as a non-root user, with security headers, gzip, asset caching and a healthcheck. It weighs 68 MB versus 951 MB for the development image.

The API URL and Sentry settings are injected when the container starts, not when the image is built. One image serves every environment, and it works with DigitalOcean App Platform (Static Site).

flowchart LR
    A[One frontend image] --> B[Container start]
    V["VITE_API_URL, VITE_SENTRY_DSN, VITE_APP_ENV"] --> B
    B --> C[Staging]
    B --> D[Production]

If you use the deploy/external-mongodb scenario, the frontend moves from the Vite dev server to this image. It still listens on port 5173 with the same variables; to change them, just recreate the container. To upgrade, rebuild with docker compose up -d --build. The deploy/local-full scenario is unchanged. There's also a Content-Security-Policy example (csp.conf.example), disabled by default, for you to enable per deployment.

Security: what landed in 0.6.2

A few days earlier we shipped 0.6.2, a hardening release for the API:

  • Changing your password requires the current one. A stolen token is no longer enough to take over an account. If you call the API directly, send current_password; if you deploy frontend and backend separately, ship the frontend first.
  • CORS restricted to explicit methods and headers, plus a restrictive Content-Security-Policy in production.
  • Per-IP limits on registration (20/hour), password reset requests (10/hour), MFA verification (10 per 5 minutes) and the public render endpoint (60/minute), answering 429 with Retry-After.
  • A 100,000-character cap on the source accepted by the public render endpoint.
  • A complete audit trail: password reset requests, MFA enabled and disabled, and account deletion are now recorded.

On top of that, 0.7.0 makes the AI diagram fixer check that the diagram is yours, and a token from a deleted account now gets a 401 instead of a 500 error.

Try it

Open a project on DiagramaHub Cloud and hit Ctrl/Cmd+B. If you self-host, upgrade from the repository; the full details are in the changelog.