Modeler-Icons

Die Modeler-Icons sind die Werkzeugzeichen der Miragon Modeler: ein Icon je Modeler für App-Icon, Favicon und Datei-Icon, kein eigenes Logo, denn die Marke bleibt Miragon.

Direkt zu Einbauen oder Neues Icon entwerfen.

Das Prinzip

Jedes Icon zeigt die ruhige Outline der Notation und genau eine Akzentfläche: die Form der Notation, die Fluss, Wert oder Veränderung trägt, nie ein Pfeil, Plus oder Haken. Die Kachel ist Miragon-Blau mit dem Radius des Komet-Icons, so gehören die Modeler sichtbar zur Familie der Plattform. Auf der Kachel und auf dunklen Oberflächen ist der Akzent Grün, auf hellen Oberflächen trägt Blau den Akzent, weil Grün auf Weiß zu wenig Kontrast hat.

Gleiche Kachel, anderes Zeichen: links der Komet für Miragon und die Plattform, rechts das Werkzeugzeichen für BPMN.

Das Set

Jede Zeile zeigt ein Icon mit Favicon und den Glyphen für helle und dunkle Oberflächen, unter „Dateien“ lädst du jede Variante einzeln, alle zusammen stecken im Brand-Kit.

BPMNbpmn
Eingebaut in bpmn-modeler#1630
Ein Stück BPMN-Ablauf: Task und Sequenzfluss, der unter das Gateway läuft.
Akzent: das Gateway, an dem der Prozess entscheidet, wie es weitergeht
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg bpmn.svg bpmn_dark.svg
DMNdmnKlein-Fassung bis 20 px
Eingebaut in bpmn-modeler#1630
Die Entscheidungstabelle: Input-Spalten, Kopfzeile und Hit-Policy-Eckzelle.
Akzent: die Output-Spalte, also das Ergebnis der Entscheidung
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono Klein hell Klein dunkel Klein mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg dmn.svg dmn_dark.svg
Wertschöpfungskettenvalue-chain
Eingebaut in value-chain-modeler#20
Zwei Glieder einer ARIS-Wertschöpfungskette mit gleich tiefer Kerbe und Spitze.
Akzent: das nächste Glied, an dem der Wert entsteht
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg value-chain.svg value-chain_dark.svg
Team Topologiesteam-topologies
Eingebaut in team-topologies-modeler#101
Drei Teamtypen wie im Buch: Stream-aligned, Enabling und Platform als Basis.
Akzent: das Stream-aligned Team als Pille, das am Fluss der Änderung arbeitet
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg team-topologies.svg team-topologies_dark.svg
Wardley Mapswardley-maps
Eingebaut in wardley-maps-modeler#128
Die Karte mit Wertkette und Evolutionsachse, darin eine Komponente als Ring.
Akzent: dieselbe Komponente nach ihrer Evolution
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg wardley-maps.svg wardley-maps_dark.svg
Context Mapscontext-maps
Eingebaut in context-maps-modeler#55
Zwei überlappende Bounded Contexts mit Shared Kernel, wie im DDD-Lehrbuch.
Akzent: der geteilte Kern
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg context-maps.svg context-maps_dark.svg
Event Stormingevent-storming
Eingebaut in event-storming-modeler#32
Zettel an der Wand: ein gekippter Zettel, vorn darauf das Domain Event.
Akzent: das Domain Event
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg event-storming.svg event-storming_dark.svg
Domain Storytellingdomain-storytelling
Noch nicht eingebaut
Der Domain-Story-Satz: Akteur und Arbeitsgegenstand wie die egon-Starter-Icons.
Akzent: das Dokument, das in der Geschichte zwischen den Akteuren wandert
Markenfrage ungeklärt, egon.io ist eine Marke von WPS. Bis über Icon und Produktnamen entschieden ist, baut niemand ein (Issue Miragon/corporate-identity#26).
Favicon 32 · 16
Hell 24 · 16
Dunkel 24 · 16
SVG
App-Icon Favicon Glyph hell Glyph dunkel Glyph mono
PNG
16 32 48 180 256 512 1024
ICO
16 bis 256
IntelliJ
pluginIcon.svg domain-storytelling.svg domain-storytelling_dark.svg

Im Einsatz

Im eigenen Chrome eines Modelers (Web, Standalone) steht das Mono-Glyph und erbt die Textfarbe, auch auf der Auswahl. In VS Code und IntelliJ nimmst du als Datei-Icon die Farbfassungen hell und dunkel, im Dock das App-Icon.

Tab-Leiste hell und dunkel: Mono-Glyph mit 16 px vor dem Dateinamen. Ein Klick macht einen Tab aktiv.

Menü hell und dunkel. Ein Klick wählt einen Eintrag aus, das Glyph färbt sich mit dem Text um.

Einbauen

Du übernimmst die Dateien unverändert aus dem Set unter /modeler-icons/, im Brand-Kit liegen sie im Ordner modeler-icons/. <id> ist die ID aus der Zeile oben, etwa bpmn.

Wo	Datei
VS Code Extension-Icon	`png/<id>-256.png`
VS Code Datei-Icon	`glyph/<id>-hell.svg`, `glyph/<id>-dunkel.svg`
IntelliJ	`pluginIcon.svg`, `<id>.svg` und `<id>_dark.svg` aus `intellij/<id>/`
Browser-Tab	`favicon/<id>.svg`
Standalone	`png/<id>-1024.png` (macOS, Linux), `ico/<id>.ico` (Windows)
Eigenes Chrome	`glyph/<id>-mono.svg` neben dem Produktnamen

Trägt ein Icon in seiner Zeile die Plakette „Klein-Fassung“, nimmst du für das Datei-Icon in VS Code glyph/<id>-klein-hell.svg und glyph/<id>-klein-dunkel.svg, denn der Explorer zeigt 16 px.

Der Komet bleibt im Empty State, im Splash und überall, wo Miragon als Absender steht.

Das vollständige Rezept mit allen Dateien, Manifest-Schnipseln, PR-Vorlage und Sichtprüfung steht in der Skill icon-design, in Claude Code rufst du sie mit /miragon-brand:icon-design auf.

Neues Icon entwerfen

Neue Modeler-Icons entstehen nur per Pull Request in Miragon/corporate-identity. Du zeichnest die Quelle brand/modeler-icons/quellen/<id>.svg im 24er-Raster und trägst das Icon in brand/modeler-icons/icons.json ein. Die Werkzeuge prüfen Raster, Gewicht und die Verwechslung bei 16 px, diese Seite zeigt das neue Icon danach neben allen anderen.

bash

npm run icons:build  # SVG-Varianten
npm run icons:render # PNG, ICO, Messung
npm run docs:dev     # Vorschau

Das ganze Vorgehen mit den Regeln des Sets, den Entscheidungen, einer Vorlage für die Quelle und der Definition of Done steht in der Skill icon-design.

Verwechslungstest bei 16 px

Bei 16 px entscheidet sich, ob ein Icon taugt. Jeder Streifen zeigt alle Icons nebeneinander wie in einer Tab-Leiste, keins darf mit einem anderen verwechselbar sein. Wo es eine Klein-Fassung gibt, zeigt der Streifen sie.

Glyph hell auf Weiß, 16 px

Glyph dunkel auf Dunkel, 16 px

Favicon auf Weiß, 16 px

Favicon auf Dunkel, 16 px

Modeler-Icons ​

Das Prinzip ​

Das Set ​

Im Einsatz ​

Einbauen ​

Neues Icon entwerfen ​