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, version history, library item, or project dashboard.

Screenshot

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
• Project Dashboard — open project configuration, analytics, combined BOM, and bulk export
• Create New Diagram — add a diagram to the current project

Screenshot

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.

Right-click any existing diagram to access:

• Open Diagram — open this diagram.
• Open Version History — open the version tree for this diagram.
• 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.

Screenshot

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)
• A Library Dashboard button (purple book icon) for inventory queries and CSV export

Screenshot

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 from Library, BOM, Table, Map, and Design Block Interface.

Screenshot

6Meet the other editor tabs

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

• Library Editor — opens when you double-click a part in the Library sidebar. One tab per part. Edits flow from here back into any diagram that references that part (use Update from Library in Diagram Properties to pick up changes). See Tutorial 3: Building Library Parts.
• Version History — every diagram has its own version tree. Open it from a diagram's Properties pane (orange GitBranch icon) or by right-clicking the diagram in the sidebar → Open Version History. The tab title is {DiagramName} Versions. From here you can trace and create different configurations of a diagram. See Tutorial 7: Versioning.
• Harness Editor — the manufacturing drawing of a harness within a diagram. Open it from the diagram's left pane Harnesses tab (Ctrl/Cmd+Shift+H) → click the Open harness editor ↗ icon. Harnesses are auto-generated from the wires you assigned to them on the diagram; the harness editor is where you set waypoints, lay out segments lengths, and assign treatments. See Tutorial 6: Harness Editor.
• Project Dashboard — one per project. Open it from the hamburger menu (☰) → Project Dashboard, or from the purple speedometer button in the project header. It rolls up release maturity, data completeness, project metrics, build-time estimates, a combined BOM, and bulk export across diagrams in the project. See Tutorial 10: Library & Project Dashboards.

The nested entity hierarchy maps directly onto these tab types:

The library sits outside the project hierarchy — it belongs to your organization, and the same part can be referenced by diagrams across many projects. Everything else is strictly nested: a harness lives inside a specific version, which lives inside a specific diagram, which lives inside a project. You can have any number of these tabs open at once; the same diagram opened at two different versions counts as two separate tabs.

Screenshot

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

Hold Ctrl or Cmd for about a second anywhere on the canvas to summon the on-screen cheat sheet. The 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

Screenshot

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 versions (snapshots, releases, or anything you have viewer access to) display a Read Only banner over the canvas with a Create Draft button.

Screenshot

10Find your profile and log out

The top-right corner shows the avatars of other users active in the project and your own profile avatar. Click your avatar for:

• Logout
• Keyboard Shortcuts cheat sheet
• Account settings

If your organization has the Artifact Agent (Copilot) enabled, you will also see an Open Artifact Agent button next to your avatar.

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 4: Make your First Diagram — once you have parts, place them and wire them up.