Item logo image for Event Storming Diagram Renderer

Event Storming Diagram Renderer

Item media 1 (screenshot) for Event Storming Diagram Renderer

Overview

Render event storming diagrams on GitHub from fenced code blocks.

# Event Storming Diagram Renderer for GitHub and VS Code 🌐 **[Playground](https://rexebin.github.io/event-storming-plugin/)** — try it live in your browser A **browser extension** (Manifest V3) and **VS Code Markdown preview extension** that render **event storming** diagrams from fenced code blocks. > ⚠️ **Event storming diagrams should be small and concise.** A complex or sprawling event storming diagram is often a signal — not an achievement — that the underlying domain design or code structure needs simplification. > In DDD practice, event storming is a collaborative discovery tool for building shared understanding, not a comprehensive documentation artifact. > If your diagram feels overwhelming, consider: > 1. are you capturing implementation details instead of bounded behaviors? > 2. Are aggregates too fat? Is a single bounded context trying to model an entire enterprise workflow? > Good event storming models fit on a wall and spark conversation, not serve as reference architecture documents. See [Alberto Brandolini's Big Picture Event Storming](https://www.eventstorming.com/) and the [DDD Community guidelines](https://dddcommunity.org/) for best practices. > This project aims to accommodate moderate complexity. PRs are welcome, but simplicity wins over supporting overly complex event storming diagrams. ## Features - 🎨 Full event storming visual language: events, commands, queries, aggregates, actors, policies, views, read models, external systems, errors, and note nodes - 📦 Container-based layout: XML DSL containers render as visual boxes for aggregates, external systems, read models, and process containers - 🗂️ Nested process groups: each child group renders inside a dashed sub-container with the group name in the top-left corner - ⬅️→ Left-to-right process flows: actor → command/query/policy → event inside containers, with failure branches rendered below nodes - ↘️ Directional arrows with shared-target fan-in layouts for commands and views - 🔍 Interactive zoom & pan - 💡 Notes-only tooltips: tooltips appear only for containers, groups, or nodes that have notes - 📝 Note badges on containers, groups, and nodes that have notes - 🎯 Collapsible diagrams with toggle button - 🌈 Color-coded rectangles (black border) per event storming standard: - **Orange** (`#FFA500`) → Domain Events - **Light Green** (`#91D49C`) → Commands - **Dark Green** (`#5BAA62`) → Queries / Read Models - **Yellow** (`#FEE254`) → Aggregates - **Yellow** (`#FEE254`) → Views - **Gray** (`#D4D3D3`) → Actors - **Blue** (`#859EBF`) → Policies - **Pink** (`#FB8597`) → External Systems - **Cyan** (`#8DCFF9`) → Errors - **Light Yellow** (`#FFF1AA`) → Temp Objects / Notes

Details

  • Version
    1.0.0
  • Updated
    12 July 2026
  • Offered by
    rexebin
  • Size
    46.96KiB
  • Languages
    English (United Kingdom)
  • Developer
    Email
    rexebin@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organisation
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions or problems, visit the developer's support site

Related

WebSocket Visualizer

5.0

Graphically displays incoming and outgoing WebSocket messages with event type grouping

PlantUML for GitHub

5.0

Renders plantuml code blocks directly on GitHub pages using the client-side TeaVM-compiled PlantUML engine.

Atlassian Mermaid Viewer

5.0

Renders Mermaid diagrams in Confluence and Jira, with quick actions to open in Mermaid Live Editor and copy diagram source code.

Mermaid Diagrams for Bitbucket

0.0

Renders Mermaid diagram blocks in Bitbucket pull request descriptions and comments.

HTTP Graph Collector

4.5

Builds a graph from your HTTP traffic. View live at nullphase.net/hg or POST to a localhost REST API. All data stays local.

PlantUML In-Place Preview

0.0

Renders PlantUML code blocks in place, entirely in your browser.

Blazor Developer Tools

5.0

Developer tools for debugging Blazor applications

GitHub Git Graph

5.0

GitHub リポジトリページにコミット履歴の git graph を表示します。

Markdown PR — Markdown PR Comments for GitHub

5.0

Comment, reply, resolve, and collapse sections directly in GitHub PR rich-diff (rendered markdown) view.

Le Git Graph - Commits Graph for GitHub

4.5

A browser extension that displays the git graph for any GitHub repository.

LeetSync — Auto LeetCode & GFG to GitHub

5.0

Automatically sync LeetCode and GeeksforGeeks solutions to your personal GitHub repository.

Markdown Viewer

0.0

View markdown files as beautifully rendered HTML with GitHub Flavored Markdown support

WebSocket Visualizer

5.0

Graphically displays incoming and outgoing WebSocket messages with event type grouping

PlantUML for GitHub

5.0

Renders plantuml code blocks directly on GitHub pages using the client-side TeaVM-compiled PlantUML engine.

Atlassian Mermaid Viewer

5.0

Renders Mermaid diagrams in Confluence and Jira, with quick actions to open in Mermaid Live Editor and copy diagram source code.

Mermaid Diagrams for Bitbucket

0.0

Renders Mermaid diagram blocks in Bitbucket pull request descriptions and comments.

HTTP Graph Collector

4.5

Builds a graph from your HTTP traffic. View live at nullphase.net/hg or POST to a localhost REST API. All data stays local.

PlantUML In-Place Preview

0.0

Renders PlantUML code blocks in place, entirely in your browser.

Blazor Developer Tools

5.0

Developer tools for debugging Blazor applications

GitHub Git Graph

5.0

GitHub リポジトリページにコミット履歴の git graph を表示します。

Google apps