# Mermaid 12.3 in Confluence: five new diagram types November 4, 2026 · 13 min read [NGPilot](https://ngpilot.com) Mermaid 12.3 is now live in [Mermaid Plus Diagrams & AI Agent for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-ai-agent-for-confluence/), and with it come five new diagram templates in the app: **Wardley strategy maps**, **event modeling flows**, **BPMN process shapes**, **animated step-by-step flows**, and **agent workflow diagrams**. Each one closes a specific documentation gap that used to force teams into a separate drawing tool — or into whiteboard photos nobody could update. **Quick answer:** Mermaid 12.3 adds BPMN element shapes for flowchart nodes, step animation on flowchart edges, and new edge markers — and Mermaid Plus pairs the engine bump with five new templates: Wardley maps (`wardley-beta`) for build-vs-buy planning, event modeling (`eventmodeling`) for event-driven design sessions, BPMN process notation for process audits, animated flows for onboarding and runbooks, and agent flows (`agentflow-beta`, which landed in Mermaid 12.0 and was still missing from most editors) for documenting AI workflows. Type `/mermaid+` on a page, pick a template from the middle panel, and the diagram renders as you edit. Existing diagrams keep working and upgrade themselves on next view. ## Which diagram solves which problem[​](#which-diagram-solves-which-problem "Direct link to Which diagram solves which problem") | You are... | Use | The problem it solves | | --------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | | Planning a roadmap or arguing build-vs-buy | **Wardley map** | Strategy debates re-litigated every quarter because nobody shares a picture of what is commodity vs novel | | Designing an event-driven feature with stakeholders | **Event modeling** | Whiteboard photos die in Confluence; the UI → command → event flow isn't reviewable by anyone who missed the session | | Documenting a business process for auditors or ops | **BPMN shapes** | Free-form flowcharts don't read as official process; drawing-tool BPMN goes stale the week after the workshop | | Onboarding new hires or writing incident runbooks | **Animated flow** | A 10-arrow diagram makes readers guess where to start and which path is "the" happy path | | Shipping an AI agent that others must review | **Agent flow** | Agent workflows live in stale slides; security and compliance need to see exactly what the agent reads, calls and hands off | ## What's new in Mermaid 12.3 (and what the app picks up)[​](#whats-new-in-mermaid-123-and-what-the-app-picks-up "Direct link to What's new in Mermaid 12.3 (and what the app picks up)") | Change | What it means for your pages | | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | **Wardley maps** (`wardley-beta`) | Strategy maps as text: components on a visibility × evolution grid, `evolve` arrows, build/buy/outsource decorators | | **Event modeling** (`eventmodeling`) | Event-driven system flows on an inferred UI / Command / Events timeline, written with numbered time frames | | **BPMN element shapes** | Flowchart nodes can now render as real BPMN notation — events, gateways, activities, data objects, data stores, annotations | | **Step-by-step flow animation** (`e1@{ step: 1 }`) | Edges play in order with a traveling dot — handy for request walkthroughs (disabled automatically for reduced-motion readers) | | **Agent workflows** (`agentflow-beta`) | Document AI agents as text: a `flow` block per agent with typed steps, `connector` blocks for the external systems it calls | | **New edge markers** | Open-arrow and hollow-circle heads, so a notation can tell two kinds of flow apart | | **Backward compatible** | Existing diagram code renders unchanged; layout and styling may shift subtly | ## Wardley maps: strategy as text[​](#wardley-maps-strategy-as-text "Direct link to Wardley maps: strategy as text") A Wardley map answers a question that requirement docs keep losing: *which parts of our value chain are commodities now, and which are still novel?* Writing it in Mermaid means the map lives next to the PRD instead of in a screenshot. Paste this into a Mermaid+ macro (or start from the **Wardley** template in the panel): ``` wardley-beta %% coordinates are [visibility, evolution] title Tea Shop Value Chain %% anchor: a user or business need (bold label) anchor Business [0.95, 0.63] %% component: a capability on the map; (build)/(buy) are strategy decorators component Cup of Tea [0.79, 0.61] component Tea [0.63, 0.81] (build) component Hot Water [0.52, 0.80] component Kettle [0.43, 0.35] (buy) component Power [0.10, 0.70] %% dependencies point from consumer to dependency (A -> B: B depends on A) Business -> Cup of Tea Cup of Tea -> Tea Cup of Tea -> Hot Water Hot Water -> Kettle Kettle -> Power %% evolution arrows: where a component is heading evolve Kettle 0.62 evolve Power 0.89 note "Standardising power allows Kettles to evolve faster" [0.30, 0.49] ``` ![A Wardley map of a tea shop value chain rendered in Confluence](data:image/svg+xml;base64,PHN2ZyBpZD0idy1kZXc5ZmZza2MxcyIgd2lkdGg9IjEwMCUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IHdoaXRlOyBtYXgtd2lkdGg6IDEwMCU7IGhlaWdodDogYXV0bzsgbWF4LXdpZHRoOiA5MDBweDsiIHZpZXdCb3g9IjAgMCA5MDAgNjAwIiByb2xlPSJncmFwaGljcy1kb2N1bWVudCBkb2N1bWVudCIgYXJpYS1yb2xlZGVzY3JpcHRpb249IndhcmRsZXkiPjxnIGNsYXNzPSJ3YXJkbGV5LW1hcCI+PHJlY3QgY2xhc3M9IndhcmRsZXktYmFja2dyb3VuZCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IndoaXRlIj48L3JlY3Q+PHRleHQgY2xhc3M9IndhcmRsZXktdGl0bGUiIHg9IjQ1MCIgeT0iMjQiIGZpbGw9IiMxMzEzMDAiIGZvbnQtc2l6ZT0iMTIuNjAwMDAwMDAwMDAwMDAxIiBmb250LXdlaWdodD0iYm9sZCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+VGVhIFNob3AgVmFsdWUgQ2hhaW48L3RleHQ+PGcgY2xhc3M9IndhcmRsZXktYXhlcyI+PGxpbmUgeDE9IjQ4IiB4Mj0iODUyIiB5MT0iNTUyIiB5Mj0iNTUyIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMSI+PC9saW5lPjxsaW5lIHgxPSI0OCIgeDI9IjQ4IiB5MT0iNDgiIHkyPSI1NTIiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2xpbmU+PHRleHQgY2xhc3M9IndhcmRsZXktYXhpcy1sYWJlbCB3YXJkbGV5LWF4aXMtbGFiZWwteCIgeD0iNDUwIiB5PSI1ODgiIGZpbGw9IiMxMzEzMDAiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJib2xkIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Fdm9sdXRpb248L3RleHQ+PHRleHQgY2xhc3M9IndhcmRsZXktYXhpcy1sYWJlbCB3YXJkbGV5LWF4aXMtbGFiZWwteSIgeD0iMTYiIHk9IjMwMCIgZmlsbD0iIzEzMTMwMCIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9ImJvbGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRyYW5zZm9ybT0icm90YXRlKC05MCAxNiAzMDApIj5WaXNpYmlsaXR5PC90ZXh0PjwvZz48ZyBjbGFzcz0id2FyZGxleS1zdGFnZXMiPjx0ZXh0IGNsYXNzPSJ3YXJkbGV5LXN0YWdlLWxhYmVsIiB4PSIxNDguNSIgeT0iNTY4IiBmaWxsPSIjMTMxMzAwIiBmb250LXNpemU9IjEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5HZW5lc2lzPC90ZXh0PjxsaW5lIHgxPSIyNDkiIHgyPSIyNDkiIHkxPSI0OCIgeTI9IjU1MiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNSIgb3BhY2l0eT0iMC44Ij48L2xpbmU+PHRleHQgY2xhc3M9IndhcmRsZXktc3RhZ2UtbGFiZWwiIHg9IjM0OS41IiB5PSI1NjgiIGZpbGw9IiMxMzEzMDAiIGZvbnQtc2l6ZT0iMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkN1c3RvbSBCdWlsdDwvdGV4dD48bGluZSB4MT0iNDUwIiB4Mj0iNDUwIiB5MT0iNDgiIHkyPSI1NTIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtZGFzaGFycmF5PSI1IDUiIG9wYWNpdHk9IjAuOCI+PC9saW5lPjx0ZXh0IGNsYXNzPSJ3YXJkbGV5LXN0YWdlLWxhYmVsIiB4PSI1NTAuNSIgeT0iNTY4IiBmaWxsPSIjMTMxMzAwIiBmb250LXNpemU9IjEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Qcm9kdWN0PC90ZXh0PjxsaW5lIHgxPSI2NTEiIHgyPSI2NTEiIHkxPSI0OCIgeTI9IjU1MiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNSIgb3BhY2l0eT0iMC44Ij48L2xpbmU+PHRleHQgY2xhc3M9IndhcmRsZXktc3RhZ2UtbGFiZWwiIHg9Ijc1MS41IiB5PSI1NjgiIGZpbGw9IiMxMzEzMDAiIGZvbnQtc2l6ZT0iMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNvbW1vZGl0eTwvdGV4dD48L2c+PGcgY2xhc3M9IndhcmRsZXktbGlua3MiPjxsaW5lIGNsYXNzPSJ3YXJkbGV5LWxpbmsiIHgxPSI1NTMuMzQ2NjcxMTQ1NTkxNCIgeTE9Ijc5LjA4NDE1NjY0MzAwNDM5IiB4Mj0iNTM5LjYxMzMyODg1NDQwODciIHkyPSIxNDcuOTU1ODQzMzU2OTk1NjIiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2xpbmU+PGxpbmUgY2xhc3M9IndhcmRsZXktbGluayIgeDE9IjU0My44MDMzNTczMjA2MjI4IiB5MT0iMTU2LjUyOTY4MzY3MTIzNzY1IiB4Mj0iNjkzLjg3NjY0MjY3OTM3NzMiIHkyPSIyMzEuNzkwMzE2MzI4NzYyMzQiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2xpbmU+PGxpbmUgY2xhc3M9IndhcmRsZXktbGluayIgeDE9IjU0Mi45MjAxODE1Mjc1NzMiIHkxPSIxNTcuODMwOTg2NTI5NjY4MjgiIHgyPSI2ODYuNzE5ODE4NDcyNDI3IiB5Mj0iMjg1LjkyOTAxMzQ3MDMzMTciIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2xpbmU+PGxpbmUgY2xhc3M9IndhcmRsZXktbGluayIgeDE9IjY4NS4yNDY2MDY1NDY0Njk0IiB5MT0iMjkwLjY2NjM5NTU5NzE1OTA3IiB4Mj0iMzM1LjM1MzM5MzQ1MzUzMDYiIHkyPSIzMzQuNTMzNjA0NDAyODQwOSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEiPjwvbGluZT48bGluZSBjbGFzcz0id2FyZGxleS1saW5rIiB4MT0iMzM0LjU2NTI1MjE4NjYyNCIgeTE9IjMzOC4zMzI4OTUzMjIyNDM0IiB4Mj0iNjA1LjYzNDc0NzgxMzM3NiIgeTI9IjQ5OC41NDcxMDQ2Nzc3NTY2IiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMSI+PC9saW5lPjwvZz48ZyBjbGFzcz0id2FyZGxleS10cmVuZHMiPjxsaW5lIGNsYXNzPSJ3YXJkbGV5LXRyZW5kIiB4MT0iMzI5LjQiIHkxPSIzMzUuMjgiIHgyPSI1MzguNDgiIHkyPSIzMzUuMjgiIHN0cm9rZT0iI2RjMzU0NSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtZGFzaGFycmF5PSI0IDQiIG1hcmtlci1lbmQ9InVybCgjYXJyb3ctdy1kZXc5ZmZza2MxcykiPjwvbGluZT48bGluZSBjbGFzcz0id2FyZGxleS10cmVuZCIgeDE9IjYxMC44IiB5MT0iNTAxLjYiIHgyPSI3NTUuNTYwMDAwMDAwMDAwMSIgeTI9IjUwMS42IiBzdHJva2U9IiNkYzM1NDUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iNCA0IiBtYXJrZXItZW5kPSJ1cmwoI2Fycm93LXctZGV3OWZmc2tjMXMpIj48L2xpbmU+PC9nPjxnIGNsYXNzPSJ3YXJkbGV5LW5vZGVzIj48ZyBjbGFzcz0id2FyZGxleS1ub2RlIHdhcmRsZXktbm9kZS0tYW5jaG9yIj48dGV4dCB4PSI1NTQuNTIiIHk9IjcwLjIwMDAwMDAwMDAwMDA1IiBjbGFzcz0id2FyZGxleS1ub2RlLWxhYmVsIiBmaWxsPSIjMDAwIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+QnVzaW5lc3M8L3RleHQ+PC9nPjxnIGNsYXNzPSJ3YXJkbGV5LW5vZGUgd2FyZGxleS1ub2RlLS1jb21wb25lbnQiPjxjaXJjbGUgY3g9IjUzOC40NCIgY3k9IjE1My44Mzk5OTk5OTk5OTk5NyIgcj0iNiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT48dGV4dCB4PSI1NDYuNDQiIHk9IjE0NS44Mzk5OTk5OTk5OTk5NyIgY2xhc3M9IndhcmRsZXktbm9kZS1sYWJlbCIgZmlsbD0iIzEzMTMwMCIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9Im5vcm1hbCIgdGV4dC1hbmNob3I9InN0YXJ0IiBkb21pbmFudC1iYXNlbGluZT0iYXV0byI+Q3VwIG9mIFRlYTwvdGV4dD48L2c+PGcgY2xhc3M9IndhcmRsZXktbm9kZSB3YXJkbGV5LW5vZGUtLWNvbXBvbmVudCI+PGNpcmNsZSBjbGFzcz0id2FyZGxleS1idWlsZC1vdmVybGF5IiBjeD0iNjk5LjI0IiBjeT0iMjM0LjQ4MDAwMDAwMDAwMDAyIiByPSIxMiIgZmlsbD0iI2VlZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjY5OS4yNCIgY3k9IjIzNC40ODAwMDAwMDAwMDAwMiIgcj0iNiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT48dGV4dCB4PSI3MTcuMjQiIHk9IjIxNi40ODAwMDAwMDAwMDAwMiIgY2xhc3M9IndhcmRsZXktbm9kZS1sYWJlbCIgZmlsbD0iIzEzMTMwMCIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9Im5vcm1hbCIgdGV4dC1hbmNob3I9InN0YXJ0IiBkb21pbmFudC1iYXNlbGluZT0iYXV0byI+VGVhPC90ZXh0PjwvZz48ZyBjbGFzcz0id2FyZGxleS1ub2RlIHdhcmRsZXktbm9kZS0tY29tcG9uZW50Ij48Y2lyY2xlIGN4PSI2OTEuMiIgY3k9IjI4OS45MiIgcj0iNiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT48dGV4dCB4PSI2OTkuMiIgeT0iMjgxLjkyIiBjbGFzcz0id2FyZGxleS1ub2RlLWxhYmVsIiBmaWxsPSIjMTMxMzAwIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0ibm9ybWFsIiB0ZXh0LWFuY2hvcj0ic3RhcnQiIGRvbWluYW50LWJhc2VsaW5lPSJhdXRvIj5Ib3QgV2F0ZXI8L3RleHQ+PC9nPjxnIGNsYXNzPSJ3YXJkbGV5LW5vZGUgd2FyZGxleS1ub2RlLS1jb21wb25lbnQiPjxjaXJjbGUgY2xhc3M9IndhcmRsZXktYnV5LW92ZXJsYXkiIGN4PSIzMjkuNCIgY3k9IjMzNS4yOCIgcj0iMTIiIGZpbGw9IiNjY2MiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIzMjkuNCIgY3k9IjMzNS4yOCIgcj0iNiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIj48L2NpcmNsZT48dGV4dCB4PSIzNDcuNCIgeT0iMzE3LjI4IiBjbGFzcz0id2FyZGxleS1ub2RlLWxhYmVsIiBmaWxsPSIjMTMxMzAwIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0ibm9ybWFsIiB0ZXh0LWFuY2hvcj0ic3RhcnQiIGRvbWluYW50LWJhc2VsaW5lPSJhdXRvIj5LZXR0bGU8L3RleHQ+PC9nPjxnIGNsYXNzPSJ3YXJkbGV5LW5vZGUgd2FyZGxleS1ub2RlLS1jb21wb25lbnQiPjxjaXJjbGUgY3g9IjYxMC44IiBjeT0iNTAxLjYiIHI9IjYiIGZpbGw9IndoaXRlIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMSI+PC9jaXJjbGU+PHRleHQgeD0iNjE4LjgiIHk9IjQ5My42IiBjbGFzcz0id2FyZGxleS1ub2RlLWxhYmVsIiBmaWxsPSIjMTMxMzAwIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0ibm9ybWFsIiB0ZXh0LWFuY2hvcj0ic3RhcnQiIGRvbWluYW50LWJhc2VsaW5lPSJhdXRvIj5Qb3dlcjwvdGV4dD48L2c+PC9nPjxnIGNsYXNzPSJ3YXJkbGV5LW5vdGVzIj48dGV4dCB4PSI0NDEuOTYiIHk9IjQwMC44IiB0ZXh0LWFuY2hvcj0ic3RhcnQiIGZvbnQtc2l6ZT0iMTEiIGZpbGw9IiMxMzEzMDAiIGZvbnQtd2VpZ2h0PSJib2xkIj5TdGFuZGFyZGlzaW5nIHBvd2VyIGFsbG93cyBLZXR0bGVzIHRvIGV2b2x2ZSBmYXN0ZXI8L3RleHQ+PC9nPjwvZz48ZGVmcz48bWFya2VyIGlkPSJhcnJvdy13LWRldzlmZnNrYzFzIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHJlZlg9IjkiIHJlZlk9IjUiIG1hcmtlcldpZHRoPSI2IiBtYXJrZXJIZWlnaHQ9IjYiIG9yaWVudD0iYXV0by1zdGFydC1yZXZlcnNlIj48cGF0aCBkPSJNIDAgMCBMIDEwIDUgTCAwIDEwIHoiIGZpbGw9IiNkYzM1NDUiIHN0cm9rZT0ibm9uZSI+PC9wYXRoPjwvbWFya2VyPjxtYXJrZXIgaWQ9ImxpbmstYXJyb3ctZW5kLXctZGV3OWZmc2tjMXMiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iOSIgcmVmWT0iNSIgbWFya2VyV2lkdGg9IjUiIG1hcmtlckhlaWdodD0iNSIgb3JpZW50PSJhdXRvIj48cGF0aCBkPSJNIDAgMCBMIDEwIDUgTCAwIDEwIHoiIGZpbGw9IiMzMzMzMzMiIHN0cm9rZT0ibm9uZSI+PC9wYXRoPjwvbWFya2VyPjxtYXJrZXIgaWQ9ImxpbmstYXJyb3ctc3RhcnQtdy1kZXc5ZmZza2MxcyIgdmlld0JveD0iMCAwIDEwIDEwIiByZWZYPSIxIiByZWZZPSI1IiBtYXJrZXJXaWR0aD0iNSIgbWFya2VySGVpZ2h0PSI1IiBvcmllbnQ9ImF1dG8iPjxwYXRoIGQ9Ik0gMTAgMCBMIDAgNSBMIDEwIDEwIHoiIGZpbGw9IiMzMzMzMzMiIHN0cm9rZT0ibm9uZSI+PC9wYXRoPjwvbWFya2VyPjwvZGVmcz48L3N2Zz4=) Reading it back: coordinates are `[visibility, evolution]` — visibility on the Y axis (0 = invisible infrastructure, 1 = directly user-facing), evolution on the X axis (0 = genesis, 1 = commodity). Red dashed arrows come from `evolve`, which marks where a component is heading. Dependencies link the value chain downward: the business needs the cup of tea, which needs power — and power is already a commodity, which is why you never build it. Other strategy decorators — `(outsource)`, `(market)`, `(inertia)` — go in the same spot as `(build)`/`(buy)`. ### Wardley maps in practice: the quarterly build-vs-buy review[​](#wardley-maps-in-practice-the-quarterly-build-vs-buy-review "Direct link to Wardley maps in practice: the quarterly build-vs-buy review") A platform team walks into roadmap planning with three competing proposals for the same authentication work. Without a shared picture, the debate repeats every quarter. With a Wardley map on the space's tech-radar page, the argument settles in one glance: identity management sits far right (commodity — buy it, integrate it), while the usage-based pricing engine sits far left (genesis — nobody has productized this, building it *is* the differentiator). The map becomes the pre-read for the planning meeting; when a component evolves — say a vendor ships a solid feature-flag product — you move it and add an `evolve` arrow, and the page history shows *when* the strategy changed and why. That is the part a whiteboard photo can never do. ## Event modeling: the system-behavior timeline[​](#event-modeling-the-system-behavior-timeline "Direct link to Event modeling: the system-behavior timeline") Event modeling describes systems by how information flows through them — user interface, command, event, read model — usually drawn on a big whiteboard. Mermaid 12.3's `eventmodeling` type brings that workflow into text, with swimlanes inferred for you: ``` eventmodeling tf 01 ui CartUI tf 02 cmd AddItem tf 03 evt ItemAdded tf 04 rmo CartItems tf 05 ui CartUI ``` ![An event modeling flow: CartUI, AddItem, ItemAdded, CartItems, CartUI across the inferred swimlanes](data:image/svg+xml;base64,PHN2ZyBpZD0ibi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmciIHdpZHRoPSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsgbWF4LXdpZHRoOiAxMDAlOyBoZWlnaHQ6IGF1dG87IG1heC13aWR0aDogOTExcHg7IiB2aWV3Qm94PSItMzAgLTMwIDkxMSA0NzAiIHJvbGU9ImdyYXBoaWNzLWRvY3VtZW50IGRvY3VtZW50IiBhcmlhLXJvbGVkZXNjcmlwdGlvbj0iZXZlbnRtb2RlbGluZyI+PHN0eWxlPiNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZ3tmb250LWZhbWlseToidHJlYnVjaGV0IG1zIix2ZXJkYW5hLGFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjE2cHg7ZmlsbDojMzMzO31Aa2V5ZnJhbWVzIGVkZ2UtYW5pbWF0aW9uLWZyYW1le2Zyb217c3Ryb2tlLWRhc2hvZmZzZXQ6MDt9fUBrZXlmcmFtZXMgZGFzaHt0b3tzdHJva2UtZGFzaG9mZnNldDowO319I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lZGdlLWFuaW1hdGlvbi1zbG93e3N0cm9rZS1kYXNoYXJyYXk6OSw1IWltcG9ydGFudDtzdHJva2UtZGFzaG9mZnNldDo5MDA7YW5pbWF0aW9uOmRhc2ggNTBzIGxpbmVhciBpbmZpbml0ZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lZGdlLWFuaW1hdGlvbi1mYXN0e3N0cm9rZS1kYXNoYXJyYXk6OSw1IWltcG9ydGFudDtzdHJva2UtZGFzaG9mZnNldDo5MDA7YW5pbWF0aW9uOmRhc2ggMjBzIGxpbmVhciBpbmZpbml0ZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lcnJvci1pY29ue2ZpbGw6IzU1MjIyMjt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lcnJvci10ZXh0e2ZpbGw6IzU1MjIyMjtzdHJva2U6IzU1MjIyMjt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lZGdlLXRoaWNrbmVzcy1ub3JtYWx7c3Ryb2tlLXdpZHRoOjFweDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lZGdlLXRoaWNrbmVzcy10aGlja3tzdHJva2Utd2lkdGg6My41cHg7fSNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyAuZWRnZS1wYXR0ZXJuLXNvbGlke3N0cm9rZS1kYXNoYXJyYXk6MDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIC5lZGdlLXRoaWNrbmVzcy1pbnZpc2libGV7c3Ryb2tlLXdpZHRoOjA7ZmlsbDpub25lO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgLmVkZ2UtcGF0dGVybi1kYXNoZWR7c3Ryb2tlLWRhc2hhcnJheTozO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgLmVkZ2UtcGF0dGVybi1kb3R0ZWR7c3Ryb2tlLWRhc2hhcnJheToyO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgLm1hcmtlcntmaWxsOiMzMzMzMzM7c3Ryb2tlOiMzMzMzMzM7fSNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyAubWFya2VyLmNyb3Nze3N0cm9rZTojMzMzMzMzO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgc3Zne2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtmb250LXNpemU6MTZweDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIHB7bWFyZ2luOjA7fSNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyAubm9kZSAubmVvLW5vZGV7c3Ryb2tlOiM5MzcwREI7fSNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyBbZGF0YS1sb29rPSJuZW8iXS5ub2RlIHJlY3QsI24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIFtkYXRhLWxvb2s9Im5lbyJdLmNsdXN0ZXIgcmVjdCwjbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgW2RhdGEtbG9vaz0ibmVvIl0ubm9kZSBwb2x5Z29ue3N0cm9rZTojOTM3MERCO2ZpbHRlcjpkcm9wLXNoYWRvdygxcHggMnB4IDJweCByZ2JhKDE4NSwgMTg1LCAxODUsIDEpKTt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIFtkYXRhLWxvb2s9Im5lbyJdLnN3aW1sYW5lLmNsdXN0ZXIgcmVjdHtmaWx0ZXI6bm9uZTt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIFtkYXRhLWxvb2s9Im5lbyJdLm5vZGUgcGF0aHtzdHJva2U6IzkzNzBEQjtzdHJva2Utd2lkdGg6MXB4O30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgW2RhdGEtbG9vaz0ibmVvIl0ubm9kZSAub3V0ZXItcGF0aHtmaWx0ZXI6ZHJvcC1zaGFkb3coMXB4IDJweCAycHggcmdiYSgxODUsIDE4NSwgMTg1LCAxKSk7fSNuLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyBbZGF0YS1sb29rPSJuZW8iXS5ub2RlIC5uZW8tbGluZSBwYXRoe3N0cm9rZTojOTM3MERCO2ZpbHRlcjpub25lO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgW2RhdGEtbG9vaz0ibmVvIl0ubm9kZSBjaXJjbGV7c3Ryb2tlOiM5MzcwREI7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgW2RhdGEtbG9vaz0ibmVvIl0ubm9kZSBjaXJjbGUgLnN0YXRlLXN0YXJ0e2ZpbGw6IzAwMDAwMDt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIFtkYXRhLWxvb2s9Im5lbyJdLmljb24tc2hhcGUgLmljb257ZmlsbDojOTM3MERCO2ZpbHRlcjpkcm9wLXNoYWRvdygxcHggMnB4IDJweCByZ2JhKDE4NSwgMTg1LCAxODUsIDEpKTt9I24tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nIFtkYXRhLWxvb2s9Im5lbyJdLmljb24tc2hhcGUgLmljb24tbmVvIHBhdGh7c3Ryb2tlOiM5MzcwREI7ZmlsdGVyOmRyb3Atc2hhZG93KDFweCAycHggMnB4IHJnYmEoMTg1LCAxODUsIDE4NSwgMSkpO30jbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcgOnJvb3R7LS1tZXJtYWlkLWZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjt9PC9zdHlsZT48Zz48L2c+PGcgY2xhc3M9ImVtLXN3aW1sYW5lIj48cmVjdCB4PSIwIiB5PSIwIiByeD0iMyIgd2lkdGg9Ijg1MSIgaGVpZ2h0PSIxMzAiIGZpbGw9InJnYigyNTAsMjUwLDI1MCkiIHN0cm9rZT0icmdiKDI0MCwyNDAsMjQwKSI+PC9yZWN0Pjx0ZXh0IGZvbnQtd2VpZ2h0PSJib2xkIiB4PSIzMCIgeT0iMzAiPlVJL0F1dG9tYXRpb248L3RleHQ+PC9nPjxnIGNsYXNzPSJlbS1zd2ltbGFuZSI+PHJlY3QgeD0iMCIgeT0iMTQwIiByeD0iMyIgd2lkdGg9Ijg1MSIgaGVpZ2h0PSIxMzAiIGZpbGw9InJnYigyNTAsMjUwLDI1MCkiIHN0cm9rZT0icmdiKDI0MCwyNDAsMjQwKSI+PC9yZWN0Pjx0ZXh0IGZvbnQtd2VpZ2h0PSJib2xkIiB4PSIzMCIgeT0iMTcwIj5Db21tYW5kL1JlYWQgTW9kZWw8L3RleHQ+PC9nPjxnIGNsYXNzPSJlbS1zd2ltbGFuZSI+PHJlY3QgeD0iMCIgeT0iMjgwIiByeD0iMyIgd2lkdGg9Ijg1MSIgaGVpZ2h0PSIxMzAiIGZpbGw9InJnYigyNTAsMjUwLDI1MCkiIHN0cm9rZT0icmdiKDI0MCwyNDAsMjQwKSI+PC9yZWN0Pjx0ZXh0IGZvbnQtd2VpZ2h0PSJib2xkIiB4PSIzMCIgeT0iMzEwIj5FdmVudHM8L3RleHQ+PC9nPjxnIGNsYXNzPSJlbS1ib3giPjxyZWN0IHg9IjI1MCIgeT0iMTUiIHJ4PSIzIiB3aWR0aD0iMTU1IiBoZWlnaHQ9IjEwMCIgc3Ryb2tlPSIjZGJkYWRhIiBmaWxsPSJ3aGl0ZSI+PC9yZWN0Pjxmb3JlaWduT2JqZWN0IHg9IjI2MCIgeT0iMjUiIHdpZHRoPSIxMzUiIGhlaWdodD0iODAiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiB0YWJsZTsgaGVpZ2h0OiAxMDAlOyB3aWR0aDogMTAwJTsiPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB0ZXh0LWFsaWduOiBjZW50ZXI7IHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Ij48Yj5DYXJ0VUk8L2I+PC9zcGFuPjwvZGl2PjwvZm9yZWlnbk9iamVjdD48L2c+PGcgY2xhc3M9ImVtLWJveCI+PHJlY3QgeD0iMzM1IiB5PSIxNTUiIHJ4PSIzIiB3aWR0aD0iMTcyIiBoZWlnaHQ9IjEwMCIgc3Ryb2tlPSIjNjc5YWMzIiBmaWxsPSIjYmNkNmZlIj48L3JlY3Q+PGZvcmVpZ25PYmplY3QgeD0iMzQ1IiB5PSIxNjUiIHdpZHRoPSIxNTIiIGhlaWdodD0iODAiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiB0YWJsZTsgaGVpZ2h0OiAxMDAlOyB3aWR0aDogMTAwJTsiPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB0ZXh0LWFsaWduOiBjZW50ZXI7IHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Ij48Yj5BZGRJdGVtPC9iPjwvc3Bhbj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PC9nPjxnIGNsYXNzPSJlbS1ib3giPjxyZWN0IHg9IjQzNyIgeT0iMjk1IiByeD0iMyIgd2lkdGg9IjE5MSIgaGVpZ2h0PSIxMDAiIHN0cm9rZT0iI2MxOWEwZiIgZmlsbD0iI2ZmYjc3OCI+PC9yZWN0Pjxmb3JlaWduT2JqZWN0IHg9IjQ0NyIgeT0iMzA1IiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjgwIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogdGFibGU7IGhlaWdodDogMTAwJTsgd2lkdGg6IDEwMCU7Ij48c3BhbiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsgdGV4dC1hbGlnbjogY2VudGVyOyB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOyI+PGI+SXRlbUFkZGVkPC9iPjwvc3Bhbj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PC9nPjxnIGNsYXNzPSJlbS1ib3giPjxyZWN0IHg9IjU1OCIgeT0iMTU1IiByeD0iMyIgd2lkdGg9IjE4MyIgaGVpZ2h0PSIxMDAiIHN0cm9rZT0iI2EzYjczMiIgZmlsbD0iI2QzZjFhMiI+PC9yZWN0Pjxmb3JlaWduT2JqZWN0IHg9IjU2OCIgeT0iMTY1IiB3aWR0aD0iMTYzIiBoZWlnaHQ9IjgwIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogdGFibGU7IGhlaWdodDogMTAwJTsgd2lkdGg6IDEwMCU7Ij48c3BhbiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsgdGV4dC1hbGlnbjogY2VudGVyOyB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOyI+PGI+Q2FydEl0ZW1zPC9iPjwvc3Bhbj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PC9nPjxnIGNsYXNzPSJlbS1ib3giPjxyZWN0IHg9IjY3MSIgeT0iMTUiIHJ4PSIzIiB3aWR0aD0iMTU1IiBoZWlnaHQ9IjEwMCIgc3Ryb2tlPSIjZGJkYWRhIiBmaWxsPSJ3aGl0ZSI+PC9yZWN0Pjxmb3JlaWduT2JqZWN0IHg9IjY4MSIgeT0iMjUiIHdpZHRoPSIxMzUiIGhlaWdodD0iODAiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiB0YWJsZTsgaGVpZ2h0OiAxMDAlOyB3aWR0aDogMTAwJTsiPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB0ZXh0LWFsaWduOiBjZW50ZXI7IHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Ij48Yj5DYXJ0VUk8L2I+PC9zcGFuPjwvZGl2PjwvZm9yZWlnbk9iamVjdD48L2c+PHBhdGggY2xhc3M9ImVtLXJlbGF0aW9uIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMSIgbWFya2VyLWVuZD0idXJsKCNlbS1hcnJvd2hlYWQtbi0xYnlhenV2YjQ2cmV2ZW50bW9kZWxpbmcpIiBkPSJNMzUzLjMzMzMzMzMzMzMzMzMgMTE1IEwzOTIuMzMzMzMzMzMzMzMzMyAxNTUiPjwvcGF0aD48cGF0aCBjbGFzcz0iZW0tcmVsYXRpb24iIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxIiBtYXJrZXItZW5kPSJ1cmwoI2VtLWFycm93aGVhZC1uLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZykiIGQ9Ik00NDkuNjY2NjY2NjY2NjY2NyAyNTUgTDUwMC42NjY2NjY2NjY2NjY3IDI5NSI+PC9wYXRoPjxwYXRoIGNsYXNzPSJlbS1yZWxhdGlvbiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEiIG1hcmtlci1lbmQ9InVybCgjZW0tYXJyb3doZWFkLW4tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nKSIgZD0iTTU2NC4zMzMzMzMzMzMzMzM0IDI5NSBMNjE5IDI1NSI+PC9wYXRoPjxwYXRoIGNsYXNzPSJlbS1yZWxhdGlvbiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEiIG1hcmtlci1lbmQ9InVybCgjZW0tYXJyb3doZWFkLW4tMWJ5YXp1dmI0NnJldmVudG1vZGVsaW5nKSIgZD0iTTY4MCAxNTUgTDcyMi42NjY2NjY2NjY2NjY2IDExNSI+PC9wYXRoPjxkZWZzPjxtYXJrZXIgaWQ9ImVtLWFycm93aGVhZC1uLTFieWF6dXZiNDZyZXZlbnRtb2RlbGluZyIgbWFya2VyV2lkdGg9IjEwIiBtYXJrZXJIZWlnaHQ9IjciIHJlZlg9IjEwIiByZWZZPSIzLjUiIG9yaWVudD0iYXV0byI+PHBvbHlnb24gcG9pbnRzPSIwIDAsIDEwIDMuNSwgMCA3IiBmaWxsPSIjMzMzMzMzIj48L3BvbHlnb24+PC9tYXJrZXI+PC9kZWZzPjwvc3ZnPg==) Each `tf` (time frame) gets a unique number and an entity type: `ui`, `cmd` (command), `evt` (event), `rmo` (read model) or `pcr` (processor). Entities land in the UI/Automation, Command/Read Model and Events swimlanes automatically, and the flow between frames is inferred — so you sketch the timeline and mermaid wires it. When inference guesses wrong, a reset frame (`rf 04 evt ...`) breaks the chain, and `->>` reconnects frames explicitly. ### Event modeling in practice: design sessions that survive the meeting[​](#event-modeling-in-practice-design-sessions-that-survive-the-meeting "Direct link to Event modeling in practice: design sessions that survive the meeting") An order-fulfillment feature kicks off with a two-hour design session: what does the customer see, what command does it trigger, what event fires, what read model does the next screen need? In the room, that is a whiteboard. The problem starts when the meeting ends — the photo lands in a page, nobody can comment on a specific step, and three sprints later the implemented behavior has quietly drifted. Typed into Confluence with `eventmodeling`, every frame is a reviewable line: the product reviewer asks about `tf 03` in page comments, the engineer edits `tf 05` when the design changes, and the diff shows up in page history. A `pcr` frame marks pure processing (no UI), and an `rf` reset marks manual steps where automatic inference would guess wrong — exactly the spots a reviewer needs to look at. ## BPMN shapes: process notation without the plugin[​](#bpmn-shapes-process-notation-without-the-plugin "Direct link to BPMN shapes: process notation without the plugin") The other headline in 12.3: flowchart nodes can now be rendered as genuine BPMN notation. The full shape catalog, in one process: ``` %% bpmn-start: thin circle · bpmn-intermediate/boundary: double circles %% bpmn-end: thick circle · bpmn-gateway: diamond · bpmn-activity: task box %% bpmn-data: document · bpmn-data-store: cylinder · bpmn-annotation: bracket flowchart TB start@{ shape: bpmn-start, label: "Start" } task@{ shape: bpmn-activity, label: "Do work" } bound@{ shape: bpmn-boundary, label: "Timeout" } mid@{ shape: bpmn-intermediate, label: "Message in" } gw@{ shape: bpmn-gateway, label: "OK?" } data@{ shape: bpmn-data, label: "Doc" } store@{ shape: bpmn-data-store, label: "DB" } ann@{ shape: bpmn-annotation, label: "SLA 24h" } endN@{ shape: bpmn-end, label: "End" } start --> task task -.-> bound bound -.-> task task --> mid mid --> gw gw -->|yes| endN gw -->|no| task task --> data data --> store ann -.-> task ``` ![A BPMN process flow with all nine shapes: start and end events, a boundary and intermediate event, a gateway, an activity, a data object, a data store and an annotation](/assets/images/bpmn-e43a44ee7a27a3f7cf846b5c08fed04e.svg) Edges stay standard flowchart arrows, so existing flowchart habits carry over. And because they are ordinary flowchart edges, BPMN processes can also use the step animation from the next section. ### BPMN in practice: refund processes auditors can read[​](#bpmn-in-practice-refund-processes-auditors-can-read "Direct link to BPMN in practice: refund processes auditors can read") Refund and chargeback handling is the classic case: support knows the steps, finance knows the controls, and the audited "official process" lives in a Visio export nobody has opened since last year's audit. Drawn with BPMN shapes in Confluence, the same process becomes maintainable text — the gateway is a real diamond, timeouts are `bpmn-boundary` events hanging off the activity, the SLA note is a `bpmn-annotation`, and the system of record is a `bpmn-data-store`. An external auditor reads the notation without a legend; an ops engineer updates the gateway condition in four lines of text after the policy change; and because it renders from source, the page always shows the process as it actually is — not as it was in the screenshot. The same pattern works for SOPs, onboarding checklists, and any flow where "which symbol is which" carries meaning. ## Animated flows: a walkthrough that plays itself[​](#animated-flows-a-walkthrough-that-plays-itself "Direct link to Animated flows: a walkthrough that plays itself") The other 12.3 headline is step animation for flowchart edges. Give each edge an id, then number the steps: ``` %% name each edge with an id: nodeId@--> ; set the play order with id@{ step: N } flowchart LR Requester e1@--> Approval Approval e2@--> Finance Finance e3@-->|approved| Payment Payment e4@--> Requester e1@{ step: 1 } e2@{ step: 2 } e3@{ step: 3 } e4@{ step: 4 } ``` ![An animated approval loop: Requester, Approval, Finance, Payment with edges highlighted in step order](/assets/images/animated-flow-f54beac928f9317490bd0e9b03e10509.svg) In the editor and on the page, the edges highlight in step order while a dot travels along the active one — the image above is the animated SVG itself, so if it is moving in your browser, that is exactly what a Confluence reader sees. Readers with reduced-motion preferences get a static diagram automatically, and `flowchart.stepDuration` (milliseconds per step, set in the YAML frontmatter at the top of the code) tunes the pace. ### Animated flows in practice: runbooks that point at the next step[​](#animated-flows-in-practice-runbooks-that-point-at-the-next-step "Direct link to Animated flows in practice: runbooks that point at the next step") Picture the two audiences where this pays off immediately. **New hires** onboarding into a request-approval-payment workflow don't squint at ten arrows wondering where to start — the diagram plays the happy path in order, and the loop from Payment back to Requester explains itself. **Incident responders** at 3 a.m. get a runbook diagram whose escalation path walks itself: detection → page the on-call → mitigate → communicate, each edge lighting up in sequence, with branch edges (rollback vs. hotfix) waiting un-highlighted until relevant. Because the animation is part of the rendered SVG on the page — not a video to maintain — the runbook stays a normal Confluence page that edits as text. ## Agent flows: document AI agent workflows as text[​](#agent-flows-document-ai-agent-workflows-as-text "Direct link to Agent flows: document AI agent workflows as text") Agent diagrams are no longer an afterthought. `agentflow-beta` (new since Mermaid 12.0, and now a template in the app) draws agentic workflows — one `flow` block per agent, typed steps inside, and `connector` blocks for the external systems the agent talks to: ``` agentflow-beta TB %% one flow block per agent; the shaded group is the agent itself %% type each step as input (parallelogram), task (rounded box) or tool (boxed bar) flow reviewer["Review Agent"] changes["Gather changes"]@{ shape: input } analyse["Analyse"]@{ shape: task } lint["run_linter"]@{ shape: tool } changes --> analyse --> lint end %% connector: an external system or human in the loop; edges and edge %% labels (-->|approved|) work exactly as in flowcharts connector ext["External system"] reviewer -->|approved| ext ``` ![An agent flow diagram: a Review Agent flow block with input, task and tool steps, connected to an external system](/assets/images/agentflow-0fa409f8e240b3e3f60e938dbeb330c6.svg) This is the shape of a code-review agent: gather the changes, analyse them, call the linter tool, and — once approved — hand the result to an external system. When the workflow changes, you edit four lines of text instead of re-drawing a swimlane diagram. ### Agent flows in practice: the security review conversation[​](#agent-flows-in-practice-the-security-review-conversation "Direct link to Agent flows in practice: the security review conversation") Before an AI agent ships, someone has to answer hard questions: what data does it read, which tools does it call, what leaves the boundary, where is the human approval? With slides, those answers are stale the week after the demo. With an agent flow on the Confluence page, the security review has an artifact to point at: the `flow` block is the agent's boundary, `@{ shape: tool }` steps are exactly the actions it can take, and `connector` blocks are the systems it hands off to — reviewers sign off per connector, not per slide. The same page then serves as the agent's living documentation: when the workflow gains a step, the diff in page history shows the boundary change, which is precisely what an AI-governance review wants to see. ## What your existing diagrams will do[​](#what-your-existing-diagrams-will-do "Direct link to What your existing diagrams will do") Nothing dramatic, by design. The 12.3 engine upgrade is backward compatible syntactically — your flowcharts, sequence diagrams, gantt charts and mind maps keep rendering as before. What you may notice: * **Diagrams upgrade themselves** — the macro re-renders with the new engine the next time the page is viewed, and the refreshed SVG is cached on the next edit. No migration, no action. * **Swimlane and ELK routing fixes** land with 12.3, so some lane diagrams may route their edges more cleanly than before. * **Use case include/extend labels** now render with proper UML guillemets (`«include»`). ## Where to find the new templates[​](#where-to-find-the-new-templates "Direct link to Where to find the new templates") | App | Where | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | [Mermaid Plus Diagrams & AI Agent for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-ai-agent-for-confluence/) | Insert the macro → **Quick Templates** panel → Wardley / Event Modeling / BPMN / Animated Flow / Agent Flow, or the Help modal for syntax examples | | [Enhanced Markdown for Confluence](https://marketplace.atlassian.com/apps/1237026/enhanced-markdown-for-confluence/) | Type a ` ```mermaid ` fence with `wardley-beta`, `eventmodeling`, `agentflow-beta` or a `@{ shape: bpmn-… }` flowchart | The Rovo AI agent in Mermaid+ knows every Mermaid v12 diagram type, so you can ask for a Wardley map in chat and have it inserted onto the page directly. ## Related posts[​](#related-posts "Direct link to Related posts") * [Mermaid 12 in Confluence & Jira: UML use case diagrams and a new look](/blog/mermaid-12-confluence-jira.md) * [UML use case diagrams in Confluence](/blog/uml-use-case-diagram-confluence.md) * [Mermaid vs PlantUML vs Graphviz in Confluence](/blog/mermaid-vs-plantuml-vs-graphviz-confluence.md) Try Mermaid Plus Diagrams & AI Agent for Confluence All 30 Mermaid diagram types plus a Rovo AI agent, with live preview and one-click templates — free for up to 10 users. [Get it on the Atlassian Marketplace](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-ai-agent-for-confluence?utm_source=ngpilot.com\&utm_medium=website\&utm_campaign=mermaid-plus-for-confluence) ## Related guides * [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md) * [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md) * [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md) * [How to Migrate Confluence Content](/blog/how-to-migrate-confluence-content.md) * [How to Add a Block Quote in Confluence](/blog/block-quote-confluence.md) Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[All Posts](/blog/archive.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links) **Tags:** * [confluence](/blog/tags/confluence.md) * [mermaid](/blog/tags/mermaid.md) * [diagrams](/blog/tags/diagrams.md) * [release-notes](/blog/tags/release-notes.md) * [wardley-map](/blog/tags/wardley-map.md) * [event-modeling](/blog/tags/event-modeling.md)