Using Quiddity

A guide to the Quiddity application

This document explains how to use Quiddity: its interface, tools, and workflows. For documentation on the IDEF5 notation itself — what each symbol means and how to read and write IDEF5 diagrams — see IDEF5 Reference.

What is Quiddity?

Quiddity is a browser-based visual modelling tool for creating IDEF5 ontology schematics: formal diagrams that describe the kinds of things that exist in a domain, the relationships between them, and how they change over time.

Quiddity runs entirely in your browser as a single HTML file. No installation, no server, no account, no dependencies. Open the file and start drawing.

Interface overview

The Quiddity window is divided into four areas:

Area Location Purpose
Toolbar Top strip File operations, editing commands, undo/redo, zoom, help, and the AI assistant
Toolbox Left panel The palette of all 17 IDEF5 symbols. Drag onto the canvas to place them, or click connection tools to enter connection mode.
Canvas Centre The drawing surface. Pan, zoom, and interact with your diagram here.
Properties panel Right panel Shows editable fields for the selected element: label, notes, color, and type-specific options. Collapses on smaller screens via the toggle button on the canvas edge.

Quick start

The fastest way to explore Quiddity is with one of the built-in examples:

  1. Click Help ▾ in the toolbar, hover over Examples, and choose Ballpoint Pen Components.
  2. Explore the diagram. Hover over symbols in the toolbox — tooltips describe each one.
  3. Click any element to select it. Its editable properties appear in the right panel.
  4. Double-click a node to edit its label directly on the canvas.
  5. When you are ready to start your own model, open File ▾ → New.
Try Water Phase Transitions for state transition diagrams and Vehicle Classification for subkind hierarchies. Each example shows a different facet of IDEF5.

File menu

The ✦ File ▾ menu at the left of the toolbar contains all file operations:

ItemAction
New Clear the canvas and start a fresh diagram. You will be asked to confirm if there is existing content on the canvas.
Save JSON Download the diagram as a .json file that captures everything: nodes, edges, labels, positions, and sizing. This file can be loaded back into Quiddity at any time on any computer.
Load JSON Open a previously saved .json file. The current diagram is replaced.
Export to SVG Download the current diagram as a scalable vector image (.svg). SVG files can be opened in any browser, edited in Inkscape or Illustrator, and embedded in Word, PowerPoint, and web pages.
Caution: Quiddity auto-saves to browser local storage on every change, but this is not a substitute for an explicit save. Browser storage can be cleared. Use Save JSON to keep permanent copies of important diagrams.

Edit menu

The Edit ▾ menu provides clipboard and delete operations. All items act on the current selection.

ItemShortcutAction
Cut ⌘ X / Ctrl X Copy the selected elements to the clipboard, then delete them from the canvas.
Copy ⌘ C / Ctrl C Copy the selected elements. Edges connecting two selected nodes are copied along with them.
Paste ⌘ V / Ctrl V Place a copy of the clipboard contents onto the canvas, offset by 20px from the original. Pasting again cascades another 20px, so repeated pastes never stack on top of each other.
Delete Delete / Backspace Remove the selected elements. Any edges connected to deleted nodes are also removed.
The clipboard is internal to Quiddity — it is not the system clipboard. You cannot paste content copied from other applications, and Quiddity content cannot be pasted elsewhere.

Undo & redo

Quiddity maintains an undo history of up to 50 steps.

← Undo button, or ⌘ Z / Ctrl Z Undo the last change
→ Redo button, or ⌘ Y / Ctrl Y Re-apply the last undone change

Every mutating operation — adding, moving, deleting, resizing, labelling, and AI generation — is individually undoable.

Zoom & fit

ControlAction
+ buttonZoom in by 20%
− buttonZoom out by ~17%
Percentage readoutShows the current zoom level (read-only)
□ Fit buttonZoom and pan to fit all nodes in the window
Mouse wheel / trackpad scrollZoom in and out, centred on the cursor position

Pan

Hold Space and drag anywhere on the canvas to pan. You can also drag on any empty area of the canvas without holding Space.

Zoom

Scroll the mouse wheel to zoom, centred on your cursor. Use the toolbar + / − buttons for step zooms. Click □ Fit to zoom the entire diagram into view.

Adding nodes

Every IDEF5 symbol begins in the toolbox on the left. Hover any item to read a description of it.

Drag to place

  1. Find the symbol you want in the toolbox.
  2. Drag it onto the canvas and release at the desired position.
  3. The node snaps to the nearest 10-pixel grid position.

Keyboard placement

Focus a toolbox item using Tab, then press Enter to place the symbol at the centre of the canvas. Useful when you do not want to leave the keyboard.

Note: Several toolbox items are connection tools, not placeable nodes. Clicking or dragging them enters connection mode rather than placing a node. These are: 2nd-Order Relation, Alt. 2-Place Relation, State Trans. (Weak), State Trans. (Strong), and all three Connect symbols (Forward, Backward, Plain).

Drawing connections

Quick connect from a selected node

The fastest way to connect two nodes:

  1. Click a Kind or Individual node to select it.
  2. Click a connection tool in the toolbox (e.g. Connect (Forward)). Because a source is already selected, Quiddity skips the source-picking step.
  3. Click the target node to complete the connection.

Two-click workflow

When no source is pre-selected:

  1. Click a connection tool in the toolbox. A hint bar appears at the bottom of the screen.
  2. Click the source node on the canvas.
  3. Click the target node. The edge is created and connection mode ends.

Drag-to-source shortcut

Drag a connection tool from the toolbox and drop it directly onto a node. Quiddity enters connection mode with that node pre-selected as the source. Then click the target node.

Cancelling

Press Esc at any point during connection mode to cancel the operation without creating an edge.

First-order relations

First-order relation rectangles are placed as nodes, then connected to kinds or individuals using edge connections drawn from node to node (select a kind, use a connection tool, click the relation rectangle, and repeat in reverse). See IDEF5 Reference — Relations for details on how to structure these.

State transition splitting

While in connection mode, clicking on the midpoint circle of an existing state transition edge automatically splits it: a standalone state transition node is inserted at that position and the connection is attached to it.

Editing elements

Inline label editing

Double-click any node to open a text editor directly on the canvas. Type your label. Press Enter or click anywhere else to confirm. Press Esc to discard changes.

Properties panel

Click any element to select it. The right panel shows all editable fields:

FieldApplies toDescription
Label Most nodes The text displayed on the node. Edits appear live on the canvas.
Notes All nodes Free-text field for definitions, references, or modelling decisions. Saved with the diagram but not displayed on the canvas.
Color Kind, Individual Choose a border color from the swatch grid. The default swatch (✕) removes any applied color.
Individual toggle Kind, Individual Check "Individual (has instance dot)" to convert a Kind to an Individual, or uncheck to revert.
Edge type Edges Change the semantic type of an existing edge (e.g. switch from Subkind-of to Instance-of).
Reference ID, Method Name Referent The two header fields of a referent classification node.
Entries Key Add or remove legend entries. Select a symbol type and type a label, then click Add. The key on the canvas updates live.

Resizing

Select a resizable node — relation rectangle, process, referent, or container. Amber corner handles appear. Drag any handle to resize. The node snaps to the 10px grid.

Selecting & moving

Single selection

Click any node or edge. It highlights in amber and its properties appear on the right.

Multi-selection

Moving

Drag any selected node. If multiple nodes are selected, the whole group moves together. All movement snaps to the 10px grid.

Deselect

Click on any empty area of the canvas to deselect everything.

Cut, copy & paste

Quiddity maintains its own internal clipboard. The clipboard survives navigation and undo operations within a session but is cleared when the page is closed.

Copying nodes

Select one or more nodes. Use Edit → Copy or ⌘ C / Ctrl C. Any edges that connect exclusively between the selected nodes are copied along with them — edges to unselected nodes are not included.

Pasting

Use Edit → Paste or ⌘ V / Ctrl V. The pasted elements land 20px below-right of the originals and become the new selection. Pasting again moves another 20px, cascading repeated pastes so they do not pile up.

Cutting

Cut copies then immediately deletes the selection. The deleted elements can be pasted back or undone with ⌘ Z.

Context menu

Right-click any node or edge to open the context menu:

ActionDescription
Delete Remove the element. Edges connected to a deleted node are also removed.
Duplicate Create an offset copy of the selected node(s). Shortcut: ⌘ D / Ctrl D.
Bring to Front Move the element on top of all overlapping elements in the drawing order.
Send to Back Move the element behind all overlapping elements.

Generating diagrams with AI

The ✦ AI button in the top-right opens the AI assistant panel. The assistant uses the Anthropic Claude API to generate and modify IDEF5 diagrams from natural language descriptions.

Setup

  1. Click ✦ AI to open the panel.
  2. Paste your Anthropic API key into the key field. The key is stored in your browser's local storage only — it is never sent anywhere except directly to the Anthropic API from your browser.
  3. The key field is replaced by a masked display once saved. Click × to clear the key.

Generating a diagram

  1. Type a description of the ontology you want to model in the message field. Be specific about the domain: name the kinds, describe key relationships, and mention any subkind hierarchies or state changes that matter.
  2. Press Ctrl Enter or click Send.
  3. A spinner appears on the canvas while the AI generates. Nodes and edges appear on the canvas when the response is received.

Iterating

The assistant maintains a full conversation history. You can continue refining the diagram with follow-up messages: "Add a subkind of Vehicle called ElectricVehicle", "Connect the Process node to the State transition", "Add a Key explaining the symbols used."

Each AI generation step is undoable. Press ⌘ Z / Ctrl Z to revert to the state before the last generation.
The AI assistant requires an internet connection and a valid Anthropic API key. API usage is billed to your Anthropic account.

Save, load & export

JSON format

The native format is a .json file containing the full diagram state. This is the only format that preserves all information for re-editing. Save JSON files early and often.

SVG export

Export to SVG for sharing, publishing, or further editing in a vector graphics application. The exported SVG clips to the bounding box of all nodes with 30px padding. Canvas background and grid are not included — the exported file has a transparent background suitable for embedding in documents.

Auto-save

Quiddity saves the diagram to your browser's local storage on every change. When you reopen the same file in the same browser, your last session is restored automatically.

Auto-save is not a backup. Local storage is tied to a specific browser on a specific machine. It can be cleared by the browser or by clearing site data. Always use File → Save JSON for important work.

Built-in examples

Access examples via Help ▾ → Examples. Loading an example replaces the current diagram — save first if needed.

ExampleWhat it demonstrates
Ballpoint Pen Components Part-of relationships and first-order relations. A good first diagram to explore.
Water Phase Transitions State transition nodes (weak and strong) showing how kinds change state under conditions.
Vehicle Classification Subkind-of hierarchies: taxonomic modelling of a kind family.
Fastener Classification A larger classification hierarchy combining subkind-of and part-of.
Agent Ontology A knowledge representation ontology for agentic AI systems.

Keyboard shortcuts

ShortcutAction
⌘ Z / Ctrl ZUndo (up to 50 steps)
⌘ Y / Ctrl YRedo
⌘ C / Ctrl CCopy selected elements
⌘ X / Ctrl XCut selected elements
⌘ V / Ctrl VPaste clipboard
⌘ D / Ctrl DDuplicate selected element(s)
Delete or BackspaceDelete selected element(s)
EscCancel active connection tool / close context menu
Space + dragPan the canvas
Mouse wheelZoom in / out (centred on cursor)
Enter on focused toolbox itemPlace symbol at canvas centre
Ctrl Enter in AI panelSend AI message
On macOS, all Ctrl shortcuts also work as ⌘ (Command) shortcuts.

iPad & iPhone

Quiddity works on iOS and iPadOS in Safari. Touch gestures replace mouse interactions.

Canvas navigation

ActionGesture
PanDrag with one finger on empty canvas space
ZoomPinch with two fingers, or tap the + / − toolbar buttons
Fit to windowTap □ Fit in the toolbar

Adding and connecting nodes

Touch and hold a symbol in the toolbox, then drag it onto the canvas. To draw a connection, drag a connection tool from the toolbox and drop it onto the source node, then tap the target.

Editing labels

Double-tap any node to open the inline label editor. The on-screen keyboard appears. Tap outside to confirm.

Limitations on touch

For the best iPad experience, add Quiddity to your Home Screen via Safari's Share button. This opens it full-screen without the browser chrome.