Part Number Canvas

Free part number diagram maker

Break a part number, model code or SKU into its parts, say what each part means, and get a diagram with the leader lines drawn for you. It runs entirely in your browser and exports SVG, PNG and JSON.

A desktop browser at least 1024px wide is recommended. On a phone you can still read the guides and examples, and try editing, but the narrow screen shows the diagram small, which makes editing while checking it awkward. Operating the tool on a phone is not part of what has been tested. How to use it

0 itemsChecks pass

Click or drag across the characters to select a range, then press the button below. With the keyboard: ← → move, Shift+← → extend, Enter makes the item. (10 / 120 characters)

Items (0)

Select some characters above and make an item; this is where you write what they mean.

Or start from a worked example

    Notes (0)

    Notes appear under the diagram, numbered automatically in reading order. Press Note on an option to insert one into its description.

    Preview

    ABX-120-RN

    Checks

    Nothing to report.

    Part number typeface

    Letters, digits and symbols, accented letters included. Japanese goes in the body faces.

    Body typeface

    Used for headings and descriptions. One typeface for the whole diagram; it cannot vary per item. English (accented letters included) and Japanese. Which characters are not covered

    What this page does

    1. Type a part number — Enter the part number in the field above and it becomes a strip of characters. Use letters, digits and symbols for the part number; Japanese goes in the headings and descriptions. Part number, model code, SKU — the names
    2. Select a range and make it an item — Drag across the strip (or click, then Shift-click) and press the button below it. That range becomes one item of the diagram.
    3. Write the heading and the options — On the card that appears, write what the range stands for (the heading) and the values it can take (each option and its meaning). The preview reassembles as you type.
    4. Save — SVG scales without blurring and keeps its text selectable; PNG is an image to paste anywhere. JSON is the project file, for editing again later.

    Read the steps in order

    Also

    • Notes go inside a description; the diagram shows a superscript number and lists them underneath.
    • It checks for leader lines that cross and fields left empty, and points at what to fix.

    Questions people ask first

    Where is my diagram saved?
    In your browser. It is saved automatically while you edit, and comes back under “Saved projects” next time you open the page. Nothing is sent to a server.
    How do I continue on another machine?
    Use “Save JSON” to write a file, and open that file with “Open JSON” on the other machine. Nothing syncs between machines on its own.
    Should I use SVG or PNG?
    SVG for web pages and print: it stays sharp at any size and its text can be searched and selected. Use PNG only where SVG is not accepted.
    The SVG looks wrong when I open it elsewhere
    The SVG carries its own fonts, so it normally looks the same everywhere. If it does not, the program opening it is ignoring embedded fonts — open it in a browser instead, or export a PNG. More on embedding fonts
    Can I edit on a phone?
    You can read and try it on a phone, but the screen is narrow, so editing is meant for a desktop browser. The “Before you start” section of the how-to guide has the details.

    Characters and fonts

    A diagram's headings and descriptions can be written in Japanese or English, and its part number in English; accented letters are included in both. Korean, Cyrillic and Thai are not in the bundled fonts. The tool says so on the spot if you type one. The editor itself is in English.

    Who it is for

    • Anyone writing the product page or catalog that explains a numbering scheme
    • Anyone putting "how to read the part number" into a spec sheet or a manual
    • Shops selling parts and equipment, explaining what a code means to a buyer
    • Engineers and sales staff sharing a numbering rule inside a company

    What it does not do

    • Invent part numbers for you
    • Manage a BOM, stock or a product master
    • Guess what your part number means — you write the meanings

    Where what you type goes

    Nowhere. Everything happens in your browser, and what you make stays there. To move a diagram to another machine, export the JSON and carry the file.

    Examples

    Fictional part numbers, each with an explanation of how it was put together. Import the JSON and edit your way from there — usually the quickest start.