draw-event-flow

Generate event flow diagrams as standalone SVG and Mermaid source from verified system behavior.

5|Updated Sep 9, 2017
One-click install
npx skills add https://github.com/hpcsc/dotfiles --skill draw-event-flow-hpcsc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: draw-event-flow
Source: https://github.com/hpcsc/dotfiles/tree/main/link/common/dot-config/.config/opencode/skills/draw-event-flow
Command: npx skills add https://github.com/hpcsc/dotfiles --skill draw-event-flow-hpcsc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Event-driven systems are hard to explain: which automation subscribes to which event, what it emits, and under what condition is scattered across handler maps and subscription filters. This Skill turns those verified facts into a clear diagram showing events, reacting automations, and the gates on each emission. ## Core Features & Use Cases - Dual deliverables: Produces a hand-placed, light/dark aware standalone SVG plus a Mermaid source with a rendered PNG proving it parses. - Fact-checked diagrams: Instructs verification of subscriptions, emissions, gates, and dead ends from code or an .emod model before drawing anything. - Event Modeling visual grammar: Uses orange event pills and bare gear automations with a defined palette, edge styles, and parser workarounds for mermaid-cli. - Use Case: Ask it to diagram which lambda emits which event in a feature-toggle-gated pipeline, and receive an embeddable SVG and an editable Mermaid file in .scratches/<slug>/. ## Quick Start Ask the assistant to draw an event flow diagram of the events and automations in the current repository using the draw-event-flow skill.

Frequently Asked Questions about draw-event-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I diagram an event-driven flow with events and automations?▼

Describe the system or point at the code, and the skill verifies each automation's subscriptions and emissions before drawing. It outputs a standalone SVG and a Mermaid .mmd file with a rendered PNG proving the source parses.

What is the difference between the SVG and Mermaid diagram outputs?▼

The SVG is hand-placed, self-contained, and light/dark aware, suited for embedding in READMEs or docs. The Mermaid source is auto-laid-out with the ELK renderer, making it easier for others to edit later.

Can I render Mermaid diagrams with mermaid-cli and Font Awesome icons?▼

mermaid-cli bundles Font Awesome, so fa:fa-cog spans render with securityLevel: loose. GitHub does not support this and prints literal text, so swap spans for the unicode ⚙ character when targeting READMEs.

Why does my SVG diagram render black in some viewers?▼

Non-browser renderers like librsvg, Quick Look, and Inkscape do not resolve CSS custom properties, so var() fills draw black. Write every colour as a literal and re-declare colours per class under the dark-mode media query.

When should an event be drawn as a pill versus a box?▼

Only a fact appended to the event log earns a stadium pill. Scheduler messages, queue deliveries, vendor calls, and emissions that never happen take other forms: labelled edges, store boxes, or dashed red boxes.