Archi Online

A web-based clone of the Archi ArchiMate® modeling tool, built with TypeScript + React, and scriptable in JavaScript through a jArchi-compatible API.

Everything runs in the browser — no backend. Multiple models can be open at once, saved as native .archimate files that open in desktop Archi (and vice versa), with the complete workspace autosaved to IndexedDB.

• ArchiMate 3.2 metamodel — all element and relationship types, with the official allowed-relationship matrix (generated from Archi's own relationships.xml)
• IDE-style docking layout (dockview) — every view opens as a draggable tab; split editors side-by-side, rearrange the Models/Palette/Properties/ Scripting panels, float groups or pop them out into separate windows, maximize any group. Layout persists across sessions; the toolbar Views menu reopens closed panels and resets the layout
• Multi-model workspace — multiple independent model roots, per-model undo/save state, cross-model view tabs, tree↔view copy/paste with context-menu actions, and full workspace restore
• Model tree — multi-model Unicode search across names, documentation, properties, types, views, folders, and specializations; drag-drop, context menus, and inline rename
• Find and replace — model or active-view scope, selective before/after preview with navigation, Unicode literal/regular-expression matching, and a single undoable apply
• Daily modeling parity — Desktop-compatible automatic nesting relationships, full Magic Connector polarity/reuse/target creation, connection endpoints and reconnection, manual/Manhattan routing, and transactional concept transformation and relationship inversion
• View editor — custom SVG canvas with:
  • drag/resize/nesting with grid snap, marquee selection, copy/paste
  • relationship tools with live validity feedback and a magic connector
  • manual bendpoints plus per-view manual/Manhattan routers
  • native note connections and live legends, groups, view references, zoom/pan, and direct-edit renaming
• Properties workflows — per-object editing plus a model-wide property ledger with exact-key usage, reviewed rename/delete, and one-step undo
• File compatibility — lossless .archimate round-trip for the documented supported feature set (verified against the Archisurance example and reciprocal Phase 1/2 Desktop fixtures); see the known compatibility limitations. File System Access API save/open includes a download fallback
• jArchi-style scripting — $() selectors, model.createElement(...), view.add(...), properties, relationship traversal (rels, sourceEnds, …), Monaco editor with API IntelliSense, script library with .ajs import/export. A script run is a single undo step.

// Example script
var actor = model.createElement("business-actor", "Customer");
var svc = model.createElement("business-service", "Claims Service");
var rel = model.createRelationship("serving-relationship", "", svc, actor);

var view = model.createArchimateView("Overview");
var vs = view.add(svc, 40, 120, 140, 60);
var va = view.add(actor, 40, 20, 140, 60);
view.add(rel, vs, va);
view.openInUI();

$("business-actor").each(function (a) { console.log(a.name); });

npm install
npm run dev        # start dev server on http://localhost:5173
npm test           # vitest: rules matrix, ops/undo, .archimate round-trip, jArchi API
npm run build      # typecheck + production build (static site in dist/)

tools/generate-rules.mjs regenerates src/model/data/relations-matrix.ts from Archi's relationship matrix (tools/data/relationships.xml).

This repository includes the reusable Archi Online Scripts and Extensions skill for coding agents that create, package, review, or troubleshoot .ajs scripts and .archi-ext extensions.

Install it from GitHub with Vercel's Skills CLI:

npx skills add ThomasRohde/archi-online --skill archi-online-scripts-extensions

Or install it from a local clone:

npx skills add . --skill archi-online-scripts-extensions

The CLI detects supported agents automatically. To target Codex explicitly, add --agent codex to either command.

Invoke the installed skill in your prompt, for example:

Use $archi-online-scripts-extensions to create an .ajs script that reports every application component.
Use $archi-online-scripts-extensions to build a portable .archi-ext package for a model-quality check.
Use $archi-online-scripts-extensions to review this extension for API, undo, and packaging issues.

The skill includes portable starters, focused API references, and a helper for validating scripts and building extension packages. See the skill instructions for the complete workflow and helper commands.

A public gist-hosted example model is available for testing the read-only viewer and share-link flow:

• Archi Online Capability Model gist
• Open the model in the hosted viewer

The live app runs at https://archi-online.com/, with https://bitter-mill-c9qn.here.now/ retained as a fallback URL. The documentation site is published to GitHub Pages at https://thomasrohde.github.io/archi-online/, built with VitePress from the same docs/wiki/ source and deployed by .github/workflows/docs.yml; see docs/pages-publishing.md.

The same pages also publish to the project wiki. The source is maintained in docs/wiki/ so documentation changes are reviewed like code:

• Wiki home
• Getting started
• User guide
• Archi compatibility
• Scripting API
• Extension API
• Extension packages
• Development

Run npm run docs:check after editing, then npm run docs:publish-wiki to push the pages to the GitHub Wiki (see docs/wiki-publishing.md).

Contributions are welcome — see CONTRIBUTING.md for the development workflow and ARCHITECTURE.md for the architectural principles changes are reviewed against. Release history is in CHANGELOG.md.

MIT. See LICENSE.

Some Archi compatibility data and icon geometry are derived from the Archi project under the MIT License. See THIRD_PARTY_NOTICES.md.

See ARCHITECTURE.md for the full architectural principles.

• src/model/ — pure-TS domain core: metamodel, rules, normalized Zustand store, Immer-patch undo/redo, operations, .archimate XML I/O
• src/canvas/ — SVG view editor: figures, connection geometry/decorations, pointer-gesture interactions
• src/scripting/ — jArchi-compatible API and script runner
• src/ui/ — app shell, dockview layout controller, model tree, palette, properties panel, script panel
• src/persistence/ — file open/save and IndexedDB autosave

ArchiMate® is a registered trademark of The Open Group. This project is not affiliated with The Open Group or the Archi project.