Part Number Canvas

How to make one

From an empty field to a saved file.

Before you start

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. The desktop versions of Chrome, Safari and Firefox are all checked.

Watch it done

The fictional part number TS-A2-W67-M12-R1, from typing it in to just before saving: about a minute, no sound, English captions. It is a scripted, automatic run of this tool, recorded as it ran, so the screen is the real one. The same steps are written out in the steps below.

Steps

  1. Type the part number

    Put it in the field at the top, labeled “Part number, model code or SKU”. Full-width letters and digits are converted to half-width as you type. Up to 120 characters.

  2. Select a range of characters

    Click or drag across the characters to select a range, and press the button reading “Make … an item”. Clicking one character and Shift-clicking another selects the same way. With the keyboard alone, ← → move between characters, Shift+← → extend the range, and Enter makes the item.

  3. Write the meaning and the options

    A card appears. Fill in the heading — what that range stands for — and the options: the text as it appears in the part number (the field labelled “As written”), then what it means. Press “Add an option” for another. What you write goes straight into the preview.

  4. Place a note

    Put the cursor where the note belongs inside a description and press the Note button on that row, then pick a note or create one. The diagram shows a superscript number, and the numbers are assigned in the order the diagram reads.

  5. Fix what the checks find

    The panel on the right lists what would break the diagram and what has not been filled in. Click a finding to jump to its card. If leader lines overlap, “Rearrange the sides” searches for another left/right arrangement.

  6. Save

    “Save SVG”, “Save PNG” and “Save JSON” are under the preview. The SVG carries subsets of the fonts it uses, so the letters do not change elsewhere. The JSON is the format to import later and keep editing.

Questions

Is what I type sent anywhere?
No. Typing, layout and export all happen in your browser, and what you make stays there.
Can I use it on a phone?
You can read the guides and examples and try editing on a phone, but editing is meant for a desktop browser. “Before you start”, above, has the details.
Which languages can a diagram be written in?
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 checks flag any missing character, so none can slip into an export unnoticed.
Is there a Japanese edition?
Yes — the 日本語 link at the top switches to it. Both editions read the same JSON files, so a diagram made in one opens in the other.
Can I move a diagram to another machine?
Export the JSON, carry the file, and import it there with “Open JSON”. Saving happens only inside one browser, so nothing syncs by itself.
Can a saved project disappear?
Yes. It lives only inside this browser, so it is gone when you clear the site's data or close a private window. Safari may also delete the storage after seven days of use without any interaction with this site, unless the site was added to the home screen. Save the JSON of anything you want to keep; “Open JSON” brings it back at any time.
May I use the diagrams commercially?
Yes. What you make is yours. The embedded fonts are all licensed for redistribution.
What if the PNG export fails?
Look at “Worth a look” in the checks: a heading or description may hold a character a diagram cannot use, such as a control character that came in with a paste. Drawing and exporting strip these out, but when a finding is shown, that character is often the cause.
Does it cost anything?
No, and there is nothing to sign up for.
Can I make a diagram of a model code or an SKU?
Yes. Part number, model code, SKU, model number and type designation are different names for the same kind of string; if its ranges encode the specification, the steps are the same. Separators are optional.

Open the tool

Published · Last updated