Workflow visualizer
Skill yigityildiz0/universal-ai-skill-library/skills/archive-variants/workflow-visualizer
531 searchable AI Agent Skills for Claude Code, OpenAI Codex, and OpenCode — EN/TR catalog, platform and risk notes, direct ZIPs, and curated bundles.
npx -y skills add yigityildiz0/universal-ai-skill-library --skill workflow-visualizerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
3 things to look at
- 18 days oldThe repository was created 18 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Create an accessible, self-contained workflow diagram as HTML, Mermaid, or SVG from a process description. Use to map systems, data flows, decisions.
SKILL.md
2.8 KB, as published. Nobody here has run it
Workflow Visualizer
Turn a process into the smallest visual that materially improves understanding. Prefer Mermaid for portable documentation, SVG for static fidelity, and self-contained HTML only when interaction is useful.
Workflow
- Extract actors, triggers, inputs, transformations, decisions, loops, stores, outputs, trust boundaries, and failure paths.
- Preserve uncertainty. Label inferred relationships and unresolved branches instead of inventing certainty.
- Choose the layout from the structure:
- flowchart for sequential and branching processes;
- swimlanes for ownership and handoffs;
- sequence diagram for time-ordered interactions;
- state diagram for lifecycle transitions;
- architecture/data-flow diagram for services and trust boundaries.
- Create a concise node-and-edge model before styling. Use stable identifiers independent of visible labels.
- Render the requested artifact and include a short legend, assumptions, and notable failure paths.
- Validate syntax, connectivity, labels, keyboard navigation, contrast, zoom behavior, and narrow-screen readability.
Security requirements
- Treat every user-supplied label, URL, note, and data value as untrusted.
- In HTML, insert visible text with safe DOM text APIs such as
textContent; never interpolate untrusted content into HTML, scripts, styles, selectors, event handlers, or SVG markup. - Allow only explicitly supported URL schemes and escape attributes for the target format.
- Do not load remote scripts, fonts, analytics, images, or CDNs unless the user explicitly requests them and understands the privacy/network tradeoff.
- Use a restrictive Content Security Policy for HTML. Avoid
eval, inline event handlers, dynamic code generation, and arbitrary file access. - Never embed secrets, private source data, tokens, or hidden prompts in the artifact.
Quality rules
- Make the main path readable without interaction; interaction adds detail rather than hiding essential meaning.
- Keep labels short, put explanations in an adjacent details panel or notes, and avoid crossing edges where possible.
- Use color as a secondary cue and pair it with shape, text, or line style.
- Support keyboard focus, semantic controls, reduced motion, and printable output.
- For large systems, provide an overview plus focused subdiagrams instead of one unreadable canvas.
Deliverable
Return the artifact, its source model, assumptions, validation status, and instructions to open or regenerate it. If the source process is incomplete, continue with clearly marked assumptions unless the missing choice would materially change the diagram.