Open-Source Interactive Pinout Generator

[xbst_]

I created a open-source interactive pinout design tool some of you might also find useful so wanted to share it. It takes a photo/render (orthographic renders are best), and generates a HTML interactive pinout diagram where the user can hover/click/tap a connector on the image to see the pinout of the connector, type and name of connector, and a description box where you can describe how to use the connector. It integrates nicely into MkDocs / Zensical (and likely others as well) documentation websites, and can also be shared on its own with the image integrated into the HTML.

There's a graphical interface for designing the pinout as well. You open the image, and draw boxes where connectors are to add the connectors. You can customize the connector names, types, pin names and colors, and description all on the designer. Then all you need to do is download a config, run a Python script, and you have your HTML. You can keep the config and open it again on the designer (or just edit manually) if you ever need to change anything on your pinout diagram.

Overall, this tool saves me a ton of time, and I get much nicer pinouts from it than before.

I made this because I used to do pinout diagrams manually. I run a small 3D printer electronics business with many new products released every year, so this was taking too much of my time, and I wasn't always too happy with the end result. I found some other pinout tools but they either didn't work for my products/designs, took incompatible files, or were missing features I wanted. So I decided to make my own. It quickly got bigger and bigger due to scope creep, and I think I ended up making a tool others might find useful too, so decided to open source it.



If you want to see a live demo of this, you can find some on my docs site: https://docs.isiks.tech/pinouts/bnc/bnc.pinout.html

There still are a few more features and connectors I'd like to add, and the designer needs some polish, but I think the generated pinouts work great.

GitHub repo: https://github.com/xbst/PinConnect

[xbst_]

Did a bunch of updates to the tool since the last post:

• Added a theming system with 6 bundled themes and ability to create your own: https://github.com/xbst/PinConnect/blob/master/docs/reference/themes.md
• Added a new layout option for pinouts with pinouts showing in a panel below the board instead of a tooltip
• Added a bunch of connectors. Full list: XH, PH, Sherlock, Micro-fit, Pin Header, Various Screw Terminals, XT30(2+2), USB C, slide switch, button, none
• More improvements to pinouts: Pinout label staggering, fullscreen mode, automatic mobile layout, connector symbols (power, fan etc.) on connector list
• Simplified installation and usage, and also published it on GitHub Pages so no software download is needed

If you want to try it you can go to https://pinconnect.isiks.tech/. It completely runs on your browser, same code as what's on GitHub https://github.com/xbst/PinConnect. Pinout demo is also still live here: https://docs.isiks.tech/pinouts/bnc/bnc.pinout.html