App Overview

What you'll learn

• The two-column layout (sidebar tabs + editor tabs) and what each region is for
• How to open, create, rename, duplicate, and delete projects and diagrams
• Where to find the Library, Harnesses, Nets, ERCs, and Comments panes
• The keyboard shortcuts you will use most often
• How autosave works and where to confirm changes are synced

Prerequisites

• Complete Tutorial 1: Welcome to Artifact (you should be signed in and have organization access).

Steps

1Understand the two-column layout

The entire app lives at the root URL / as a single-page workspace. It is split into two resizable columns.

• Left column — pinned sidebar with two tabs at all times: Diagrams (project explorer) and Library (parts catalog).
• Right column — editor tabs. The active tab is whatever you opened last: diagram, harness, or library item.

2Use the project menu (hamburger)

Click the ☰ hamburger icon at the top-left to open the project menu. From here you can:

• Open Project — pick a project from your organization
• Create New Project — start a new project
• Copy Project Link — copy a shareable URL to the current project
• Rename, Duplicate, Delete — manage the current project
• Create New Diagram — add a diagram to the current project

3Work with the Diagrams sidebar

The Diagrams tab shows the file-tree-like explorer for the current project. Diagrams are listed under categories/folders.

To create a diagram, click Create New Diagram at the bottom (or right-click a folder and choose New Diagram). Artifact creates a diagram named New Diagram with an initial version called Initial Draft and immediately enters inline rename mode so you can type a new name.

A diagram with more than one variant (Tutorial 12: System Configuration & Versioning) shows each variant as its own row underneath it; open, rename, or delete a specific variant from its row.

Right-click any existing diagram to access:

• Open Diagram — open this diagram.
• Create Variant — start an alternate design of this diagram. (On a variant row, use Duplicate into New Variant.)
• Rename — inline-edit the diagram name in the sidebar.
• Duplicate — make a full copy of the diagram in the same project.
• Delete Diagram — remove the diagram after a confirmation dialog.
• Create New Diagram — create a new diagram in the project.
• Edit Design Block Interface — configure which ports this diagram exposes when used as a reusable subsystem.
• Add Design Block to Diagram — drop this diagram as a design block into your currently active diagram.

4Open the Library

Switch to the Library tab in the left sidebar, or press L (no modifiers) anywhere in the app to jump to it and focus its search bar.

The library is organized into category accordions:

• Design Blocks, Devices, Connectors, Cables, Inline Components, Terminals, Accessories, Contacts, Backshells, Tools, Harness Treatments, Build Notes

Above the categories you'll see a row of Annotations tiles (text label, rectangle, circle, arrow, build note diamond) that you can drag onto a diagram. The header also offers:

• A Search library... field
• A Refresh Library button (circular arrow)
• An Advanced Library Search button (funnel icon) for inventory queries, CSV export, and bulk upload (Tutorial 4: Library Search Tools)
• A Channels ⚙ Interfaces button for organization-wide channel and interface settings

5Tour the diagram editor panes

Open a diagram (double-click one in the Diagrams sidebar, or create one). The right-column editor splits into three regions:

• Canvas in the middle — the schematic drawing area. A Fit to View control sits at the bottom-left.
• Left pane inside the editor (separate from the main left sidebar) — analysis tabs:
  • Search (Ctrl/Cmd+F) — find items already on this diagram
  • Harnesses (Ctrl/Cmd+Shift+H)
  • Nets (Ctrl/Cmd+Shift+N)
  • ERCs (Ctrl/Cmd+Shift+R) — electrical rule checks
  • Comments (Ctrl/Cmd+Shift+C)
• Right pane — Properties. Toggle it with Ctrl/Cmd+P. The contents change based on what is selected on the canvas. With nothing selected you see Diagram Properties with action buttons such as Update → Library Parts / Design Blocks, BOM, Table, Map, and Design Block Interface.

6Meet the other editor tabs

The diagram editor is the tab you'll spend the most time in, but the right column hosts other tab types:

• Library Editor — opens when you double-click a part in the Library sidebar. One tab per part. Use Update → Library Parts in Diagram Properties to pull library changes into a diagram. See Tutorial 3: Building Library Parts.
• Harness Editor — the manufacturing drawing of one harness. Open it from the Harnesses pane (Ctrl/Cmd+Shift+H) → Open harness editor ↗. See Tutorial 10: Harness Editor.

Checkpoints, releases, and system-wide reports live in the System Configuration dashboard, opened from Diagram Properties → Configuration Dashboard. See Tutorial 12: System Configuration & Versioning.

The entity hierarchy:

Projects and library items belong to your organization. A harness lives inside a variant, which lives inside a diagram, which lives inside a project.

7Recognize the main entity types

You will see these item types on the canvas and in the property editor:

• Device — an electrical component with port(s) and pin(s)
• Connector — a standalone connector
• Wires / Cables - connections between the pins of devices and connectors
• Bundle — collapsing multiple wire/cables to a single line
• Group — a styled box containing multiple devices, connectors, and wires/cables
• Text, Arrow, Shape, Image, Table, Build Note — documentation and markup drawn on top of the sheet

8Learn the must-know keyboard shortcuts

Shortcuts you'll use commonly:

• L — jump to the Library and focus search
• Ctrl/Cmd+F — search the current diagram
• Ctrl/Cmd+P — toggle the Properties pane
• Ctrl/Cmd+Shift+H / N / R / C — open Harnesses / Nets / ERCs / Comments
• Ctrl/Cmd+A / N / E — select all / all nodes / all edges
• B / U — bundle / unbundle wires
• T — twist / untwist wires
• S — split / unify route
• G — group / ungroup
• R / F — rotate / flip symbol devices
• Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z — undo / redo

9Trust autosave

There is no Save button in the diagram editor. Every edit is debounced and synced to the cloud automatically. The status indicator at the bottom of the Diagrams and Library sidebars tells you the current state:

• Syncing Changes... — a save is in flight
• All Changes Synced — everything is saved
• Sync Failed — something went wrong; try again or check your connection

Read-only views (checkpoints, releases, or drafts you only have Viewer access to) show a banner over the canvas. On a checkpoint or release, the banner names it and links back to the editable draft.

10Find your profile, the Agent, and log out

The top-right of the tab bar shows project presence — colored avatars for teammates currently in this project (up to 5, then +N). If your organization has the Artifact Agent (Copilot) enabled, the purple Artifact AI icon sits here too (tooltip Open Artifact Agent).

Your own profile avatar is fixed in the bottom-left corner of the app (small circular icon beside the sync status on the sidebar footer). Click it for:

• Logout
• User Settings — email, organization, and role
• Keyboard Shortcuts — opens the full shortcut list
• API Keys & Documentation — Editors and Administrators only (see Tutorial 17: Admin Options)
• Admin Controls — Administrators only (see Tutorial 17: Admin Options)

Summary

You now know the two-column layout, how to navigate between the Diagrams and Library sidebars, how to open and create projects and diagrams, where the analysis panes and properties live inside the editor, and which keyboard shortcuts will speed up your work. You also know that autosave handles persistence and where to check sync status.

What's next

• → Tutorial 3: Building Library Parts — populate the library with the connectors, cables, and devices you'll use on your first diagram.
• → Tutorial 5: Make your First Diagram — once you have parts, place them and wire them up.