The Miragon modeler platform in one repository: ONE contract every Miragon modeler implements, the shared chrome around their canvases, and the five modelers built on the two. Each modeler is one notation: a plain-text file is the source of truth, a diagram-js renderer shows and edits it, and a web app and a VS Code extension put the renderer in front of users. Every package and extension keeps its own version and its own npm or Marketplace name.
| Modeler | Files | Web app | VS Code extension |
|---|---|---|---|
| Wardley Maps | .wmap, .owm (OWM text DSL) |
wardley-maps.modeler.miragon.io | Marketplace · Open VSX |
| Event Storming | .storm (line DSL) |
event-storming.modeler.miragon.io | Marketplace · Open VSX |
| Team Topologies | .tt, .ttm.json, editable *.tt.png |
team-topologies.modeler.miragon.io | Marketplace · Open VSX |
| Context Maps | .cm, .cm.json, editable *.cm.png; .cml in/out |
context-maps.modeler.miragon.io | Marketplace · Open VSX |
| Value Chain | .vc, .vc.json |
no public deployment yet; run it locally | Marketplace |
Their libraries on npm, each in modelers/<modeler>/packages/<package>:
- Wardley Maps:
@miragon/wardley-schema-model,@miragon/wardley-dsl,@miragon/wardley-transforms,@miragon/wardley-renderer - Event Storming:
@miragon/event-storming-schema-model,@miragon/event-storming-dsl,@miragon/event-storming-transforms,@miragon/event-storming-renderer - Team Topologies:
@miragon/team-topologies-schema-model,@miragon/team-topologies-renderer - Context Maps:
@miragon/context-maps-schema-model,@miragon/context-maps-cml,@miragon/context-maps-renderer - Value Chain:
@miragon/value-chain-schema-model,@miragon/value-chain-renderer
The schema-model, dsl, transforms and cml packages are DOM-free and run in any JavaScript
runtime; the renderer packages are the diagram-js viewers and modelers. How to embed one is in
its modeler's README.
| Package | Path | Status |
|---|---|---|
@miragon/modeler-api |
packages/api |
the collaborative-modeler contract and its conformance kit, 0 runtime dependencies |
@miragon/modeler-shell |
packages/shell |
the shared chrome around diagram-js modelers (menu, palette skin, zoom panel, keys, fit, VS Code plumbing), its conformance kit and a smoke-test driver for a real VS Code (also in a Linux container), 0 runtime dependencies, API |
Every renderer implements the contract and runs its conformance kit; both apps of every modeler mount the shell and run the shell's conformance kit. The contract's laws, the conformance kit and its versioning are documented in the package README. The plan for the shell, the contract roadmap and the rollout across the modelers live in #4.
- Shell implementation notes: how
@miragon/modeler-shellimplements the chrome anatomy and the IDE-host rules of the Miragon design system with diagram-js, VS Code and browser APIs, section by section, with the rule each section implements.
One marketplace, .claude-plugin/marketplace.json, serves the
plugins of the suite:
/plugin marketplace add Miragon/modeler-suite
/plugin install wardley-maps-modeler@modeler-suite
/plugin install event-storming-modeler@modeler-suite
/plugin install team-topologies-modeler@modeler-suite
/plugin install modeler-kit@modeler-suite
| Plugin | Skills | For |
|---|---|---|
wardley-maps-modeler |
wardley-mapping, owm-dsl |
the Wardley Mapping method and the .wmap / .owm text format |
event-storming-modeler |
event-storming, storm-dsl |
the Event Storming method and the .storm text format |
team-topologies-modeler |
team-topologies, tt-format |
the Team Topologies method and the .tt / .ttm.json format, with a checker |
modeler-kit |
new-modeler |
building a new Miragon modeler on these two packages, with a runnable template |
Value Chain's notation skill is a project skill in
modelers/value-chain/.claude/skills/, not a plugin.
Drift tests keep the plugins in step with the code (see CONTRIBUTING.md).
Node ^22.22.2 or >=24.15.0 and npm. From the repository root:
npm ci
npm run build:shared # @miragon/modeler-api and @miragon/modeler-shell, which every modeler links
npm run wardley-maps dev:webapp:plain # the Wardley Maps web app on Vite, http://127.0.0.1:5180
npm run wardley-maps build # the Wardley Maps packages: its tests resolve them from dist
npm run wardley-maps test # its unit tests
npm test # the shared packages, the repository checks and every modeler's unit tests
npm run lint # type checks and ESLint, everywherenpm run <modeler> <script> runs a script of one modeler (wardley-maps, event-storming,
team-topologies, context-maps, value-chain), npm run modelers <script> runs it for all
five. CONTRIBUTING.md lists the scripts, the dev servers, the browser, e2e and
VS Code tests, the pre-commit hook and the conventions for commits and pull requests;
docs/ci-and-releases.md explains CI and releases.
packages/
api/ @miragon/modeler-api: the collaborative-modeler contract and its conformance kit
shell/ @miragon/modeler-shell: the shared chrome, its conformance kit, the VS Code smoke driver
modelers/
wardley-maps/ ─┐ each: packages/ (npm libraries), apps/webapp, apps/vscode, e2e/,
event-storming/ │ example/, docs/, and README.md, CLAUDE.md, CONTRIBUTING.md for what
team-topologies/ │ is special to its notation
context-maps/ │
value-chain/ ─┘
tooling/ the ESLint and dependency-cruiser presets; each modeler names its DOM-free packages in package.json
plugins/modeler-kit/ the Claude Code plugin with the new-modeler skill and its template
.claude-plugin/ the suite's Claude Code marketplace
test/ repository-level checks: the modeler-kit drift test, every modeler's boundaries, Dependabot auto-merge
docs/ shell implementation notes, CI and releases
See CONTRIBUTING.md, and for each modeler its own Wardley Maps, Event Storming, Team Topologies, Context Maps and Value Chain notes. Agent-oriented rules are in CLAUDE.md.
MIT