PinConnect

PinConnect turns a photo of a circuit board into an interactive pinout diagram: hover or tap a connector and its pin names, colors, and description appear. The result is a single HTML file you can open in a browser, share, or embed in a documentation site.

There are two ways of generating pinouts with it:

In the browser. Open the designer at pinconnect.isiks.tech, load a board image, draw a box over each connector, label the pins, and press Generate. Nothing to install. Start with Getting started.

From the command line. pinconnect board.toml renders the same file from a saved config, which is what you want for regenerating pinouts as a board changes, or in a CI job that publishes a docs site. See Command line and CI.

Contents

Start here

• Getting started: from a board image to a finished pinout, in the browser.
• The designer: a full tour, keyboard shortcuts, and what to do when something goes wrong.
• Concepts: how the pieces fit together, and the three kinds of TOML file.

Going further

• Command line and CI: install pinconnect, regenerate pinouts, and run the designer locally.
• Embedding with md-iframe: put a pinout into an MkDocs or Zensical page.
• Publish on a docs site: generate pinouts in CI and deploy them with GitHub Pages.

Reference

• Board TOML: every field in a board config, including jumper settings for pin headers.
• Connector types: the built-in library, and adding your own.
• Themes: colors, fonts, and layout behavior, and writing your own theme.