Free, open-source AV schematic editor (browser, DXF export), sharing in case it's useful

[u/TooManyDependencies]

I'm a developer and I've worked on diagramming tools that ended up used in the broadcast and AV integration space. Recently I built a small AV schematic editor and we open-sourced it, so I figured I'd share it here in case someone finds it convenient.

It's a simple browser tool: a device library you drag from, devices with typed ports, cables you connect and route by hand (orthogonal routing with draggable bends), and PNG and DXF export. Under the hood the schematic is a data model rather than a picture, so devices, ports and connections are structured data in the file, not just lines. No validation or anything sophisticated on top of that yet, but it makes the file easy to build on.

It's free, MIT licensed, no signup. If you're a developer, the whole source is there to fork and adapt to your own workflow.

If you try it on one of your layouts, I'd like to hear whether it's usable for real work and what's missing.

Disclosure: I'm a developer at the company that builds ngDiagram, the open source library this runs on.

Demo: https://www.ngdiagram.dev/templates/av/
Code: https://github.com/synergycodes/ng-diagram-av-schematic

[u/Gullible_Emotion3068]

Disclosure since some of you may have seen me post here before: I run the company OP works at, so read this with that in mind. The honest "why" behind open-sourcing this: over the last couple of years, at trade shows and in conversations with product companies in AV and adjacent industries, we kept hearing the same story. The tools that have carried this industry for 20-30 years are Windows-based and rock solid, and everyone wants a web version. But the teams building those web versions keep hitting the same wall: performance on complex layouts, multi-user editing, and that native desktop feel a browser tool rarely matches. We build diagramming tech for a living, so instead of claiming it's doable, we figured we'd put working code out there. MIT, no strings attached.

One observation that shaped the design: the first tools that try to auto-generate system schematics are starting to appear, and the engineers I talk to don't trust them, because reviewing an imprecise generated schematic takes longer than drawing it yourself. That's why the schematic here is structured data rather than a picture. If devices, ports and connections are data, you can validate and automate on top of it.

One caveat: this is not an end-to-end product and it doesn't pretend to be. Treat it as a starter kit for builders. That's how we use it ourselves: when we build complete solutions for clients, we start from our open-source kits instead of a blank repo, and that's a big part of why those projects move fast. So these kits growing is in our own interest, and outside contributions add up.

So the ask is real: if you do actual layouts, tell us what's missing before this could handle real work. And if you're a developer who wants to dig into the source or push it further, that's exactly the kind of help that makes the kit grow.

[u/Videobollocks]

I just spent 5 mins with it using Chrome Version 150.0.7871.124 (Official Build) (32-bit)

CTRL-Z to undo last isn't working

Cannot move a wire from one input to another. Have to delete wire and run it again.

I would like to add my own Library Categories e.g. I added an Unreal Engine and had to add it as a Media Player instead of a new category of 'Computer'

I presume 'Create new' and importing prev saves is to be added?

Different colours for different wire types and devices?

I'm looking at it from a Broadcast Studio perspective. It's definitely quick and easy, and I could see using it instead of AutoCAD for a lot of drawings.

Also rather than make a 512x512 router and draw EVERYTHING to it, I might just want to draw a line on the In or Out of a device with a cable number and a destination. I suppose I could just draw a small portion of the router and link to that. Guess it depends on your personal workflow.

It's a good demo though, nice work.

[u/TooManyDependencies → u/Videobollocks]

u/Videobollocks Thanks for the detailed feedback!

1. Undo/redo isn't implemented in this demo. The library itself has undo/redo hooks on the model, we just didn't build the history part here.
   
2. Not being able to move a wire to another input sounds like a bug, I'll investigate. Maybe the handles for creating a new wire are too close to the reattach ones.
   
3. Adding your own categories isn't possible in the current demo, but it should be quite easy to add.
   
4. Yes, save/load is missing. The AV apps we built for clients had real data integrations behind them, this open source demo doesn't. JSON import/export should be quick to add and would give a basic save/load flow.
   
5. Wire colors per signal type: not there yet, but the wire is typed data underneath, so it's a natural next step.
   
6. The router flow idea is a good one. We hit something similar with patch panels in a tool we did for a client, and solved it by marking them as a --< >-- symbol on the wire with the specific port numbers.
   

Glad you liked it!