
Egon.io — The Domain Story Modeler
Map how your team gets work done — visually, right inside Visual Studio Code.
Report Bug
·
Request Feature
About
A Domain Story captures how people actually get work done — who does what, with which
documents and messages, told as a short numbered sequence you can read like a sentence. It gives
domain experts and developers one shared picture of a process, no code required.
This extension brings Egon.io, the open-source Domain Story Modeler, into VS
Code: it opens .egn files — Egon's plain-text story format — in a graphical editor while the file
itself stays the source of truth. Because each story lives in your repo as text, it versions,
diffs, and reviews right alongside the code it describes.
Getting started
Install Egon.io — The Domain Story Modeler (publisher miragon-gmbh) from the VS Code
Marketplace. The built-in Get Started with Egon.io walkthrough is the recommended first stop —
open it from Help > Welcome or run Welcome: Open Walkthrough… from the Command Palette
(Cmd/Ctrl+Shift+P).
To create a story, add a new file and save it with the .egn extension (for example
my-first-story.egn); VS Code opens it straight into the modeler. Already have an .egn file?
Just open it and the editor appears automatically.
Reading a domain story
A story is read in order, following the numbered activities:
- Actors are the people or systems that do something (a customer, a clerk, a service).
- Work objects are what they act on or exchange (a document, an email, a request).
- Activities are the numbered steps that connect them, so the diagram reads in order —
1. Customer sends order to Clerk, 2. Clerk files order in System…
Follow the numbers from start to finish and the whole process reads back as one continuous story.
Editing a domain story
Open an .egn file and you get the full graphical modeler, backed by the plain-text file:
- Palette (left edge) — drag actors and work objects onto the canvas.
- Context pad (on a selected element) — connect elements, append the next step, change an
element's type, or delete.
- Labels and numbering — double-click an element or activity to name it; activities are
numbered automatically so the sequence stays readable.
- Minimap (top-right corner) — a canvas overview for navigating larger stories.
- Keyboard shortcuts — select all (
Cmd/Ctrl+A), rename (E), lasso select (L), pan with
the hand tool (H), the space tool (S), and copy/paste (Cmd/Ctrl+C / Cmd/Ctrl+V).
- Two-way sync — everything you draw is written back into the
.egn file, and edits to that
text re-render the canvas, so the canvas and the text stay in step as you work. To reopen a story
as raw text, use View: Reopen Editor With… and pick Text Editor.
Custom icons
Add your own actors and work objects by placing .svg files in an .egon/icons/actors or
.egon/icons/work-objects folder in your workspace — each file's name becomes the icon's name in
the palette. See Custom Icons
for details.
Contributing
Contributions are greatly appreciated.
If you have a suggestion that would make this better, open an issue with the tag enhancement, fork
the repo, and create a pull request. Please use
semantic commit messages, and
don't forget to give the project a star. Thanks!
New to the method? Learn more about Domain Storytelling and read
the Egon.io user guide.
License
Distributed under the GPLv3 license.