New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Update Workflow Diagram

by oocx in oocx/tfplan2md

Convert the mermaid diagram in docs/workflow.md to a blueprint-styled SVG for the website.

MITAuto-check passedDevelopment

Install Update Workflow Diagram

skills CLI
$ npx skills add oocx/tfplan2md --skill update-workflow-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install oocx/tfplan2md update-workflow-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/update-workflow-diagram .claude/skills/update-workflow-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
update-workflow-diagram
GitHub stars
174
Token cost
~1.3k tokens
SKILL.md length
649 words
Files
1
Skills in repo
28
Repo updated
First seen
Licence
MIT

At a glance

Convert the mermaid diagram in docs/workflow.md to a blueprint-styled SVG for the website.

  • The workflow diagram in agents.md is updated and needs to be reflected on the website
  • SKILL.md covers Purpose, When to Use, Hard Rules and Blueprint Style Reference, plus 2 more sections
  • Calls npx
  • Tasks that involve Diagrams

What it does

Update Workflow Diagram is an agent skill from oocx/tfplan2md. Convert the mermaid diagram in docs/workflow.md to a blueprint-styled SVG for the website. Use when the workflow diagram in agents.md is updated and needs to be reflected on the website.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: Convert terraform plans (json) into human readable markdown for easier review of changes in pull requests. The licence is MIT.

When your agent uses it

  • The workflow diagram in agents.md is updated and needs to be reflected on the website
  • Tasks that involve Diagrams

Example prompts

  • “/update-workflow-diagram”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 88d5240. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Update Workflow Diagram loads about 1.3k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 649 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from oocx/tfplan2md at commit 88d5240, republished under its MIT licence (© oocx). 649 words, ~1,339 tokens.

Download SKILL.mdSave it as .claude/skills/update-workflow-diagram/SKILL.md (or your agent's skills folder).
name
update-workflow-diagram
description
Convert the mermaid diagram in docs/workflow.md to a blueprint-styled SVG for the website. Use when the workflow diagram in agents.md is updated and needs to be reflected on the website.

Update Workflow Diagram from Mermaid

Purpose

Regenerate the website/ai-workflow.svg file from the canonical mermaid diagram in docs/workflow.md. The website uses a hand-crafted blueprint-styled SVG that preserves the exact layout generated by mermaid but applies a custom visual style (technical drawing aesthetic with cyan/white on dark blue).

When to Use

  • After changes to the mermaid diagram in docs/workflow.md
  • When adding, removing, or renaming agents/artifacts
  • When modifying the workflow connections

Hard Rules

Must
  • Use mermaid-cli (mmdc) to render the mermaid diagram to SVG
  • Parse the generated SVG to extract node positions and path definitions
  • Preserve exact node positions and path routing from mermaid output
  • Apply blueprint styling consistently per node type
  • Keep the SVG self-contained (all styles inline or in <style> block)
Must Not
  • Manually calculate node positions (extract from rendered mermaid SVG)
  • Manually recreate path curves (copy exact d attributes from mermaid paths)
  • Change the visual styling without updating this skill documentation

Blueprint Style Reference

Colors
ElementColorNotes
Background#0d1b2aDark navy blue
Grid linesrgba(255,255,255,0.1)Subtle white grid
Agent borders#00ffff (cyan)Solid 2px
Agent text#ffffff (white)Monospace font
Meta-agent borders#34d399 (green)Solid 2px
Meta-agent text#34d399 (green)Monospace font
Artifact borders#ffffff (white)Dashed 2px (2,2)
Artifact fillrgba(0,255,255,0.1)Subtle cyan
Artifact text#00ffff (cyan)Monospace font
Human borders#ffffff (white)Dashed 2px (4,2)
Human text#00ffff (cyan)Monospace font
Paths (solid)#00ffff (cyan)2px with glow
Paths (dashed/feedback)#ff6b6b (coral red)2px, dasharray 6,3
Arrow markersSame as path color
Node Classes (from mermaid)
Mermaid ClassSVG ClassDescription
humannode-humanMaintainer (dashed white border)
agentnode-agentRegular agents (solid cyan border)
metaagentnode-metaagentWorkflow Engineer (solid green border)
artifactnode-artifactProduced documents (dashed white, cyan fill)
Glow Effects

All nodes and paths have CSS filter glow:

css
/* Nodes */
filter: drop-shadow(0 0 4px rgba(0,255,255,0.6));

/* Paths */
filter: drop-shadow(0 0 2px rgba(0,255,255,0.4));

Actions

One command. It extracts the mermaid block from docs/workflow.md, renders it with mmdc for layout, and restyles the result:

bash
scripts/render-workflow-diagram.py

--check verifies the committed SVG was generated from the diagram as it stands now, by comparing a source-sha256 stamp written into the file. It does not re-render, so it needs no browser and runs in milliseconds — this is the CI check.

That indirection is not laziness. Mermaid lays out text by measuring it in a browser, so node coordinates depend on which fonts the machine has; a byte-for-byte comparison passes locally and fails in CI for no reason a reader could act on. The stamp catches the failure that matters — editing the diagram and forgetting to regenerate.

Show full SKILL.md (240 more words)Show less

--check-render does the strict byte comparison against a fresh render. Use it on the machine that generated the file, not in CI.

The stamp covers the diagram source, not this script: change the styling logic without regenerating and --check still passes. If you edit the script, re-run it and commit the SVG.

The script exists because this was a ten-step manual parse, and doing it by hand loses things quietly. Two failures found the first time it ran, neither visible in the output text:

  • The Maintainer node vanished. It is a stadium, drawn as a free <path> inside an outer-path group — matching neither the <rect> nor the <polygon> pattern, so the node was skipped without an error.
  • The gate hexagons rendered ~100px from their own labels, because a mermaid <polygon> carries its own inner transform in addition to the node group's.

Always look at the rendered image before committing. A grep for the node names passes in both broken cases above.

bash
npx --yes sharp-cli -i website/src/media-root/ai-workflow.svg -o /tmp/check.png resize 900

Node styling

Mermaid classDefSVG classAppearance
rolenode-agentsolid cyan border, white text
metanode-metaagentsolid green border, green text
externalnode-externalsolid pink border — the Codex reviewer
gatenode-gateamber hexagon, amber text
artifactnode-artifactdashed white border, cyan fill
(unclassed)node-humandashed white border, cyan text

Adding a new classDef to the diagram means adding it to NODE_CLASS and STYLE in the script; an unmapped class falls back to the human style, which will look wrong.

© oocx, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/update-workflow-diagram of oocx/tfplan2md.

Open the folder on GitHubat commit 88d5240

Compare with similar skills

Update Workflow Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Update Workflow Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Update Workflow Diagram this skilloocx/tfplan2md174—~1.3kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify81k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design47k1 repos~7.5kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    81k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    47k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 6 days ago
    DevelopmentAuto-check: notes

  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from oocx/tfplan2md

All 28 skills in this repo

  • Create Agent Skill

    oocx/tfplan2md

    Create a new Agent Skill following project standards and templates.

    174 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Detect Diagram Crossings

    oocx/tfplan2md

    Detect and analyze edge crossings and overlaps in SVG workflow diagrams using geometric intersection algorithms and visual analysis.

    174 GitHub stars~4.3k tokensUpdated yesterday
    Auto-check passed

  • Generate Release Screenshots

    oocx/tfplan2md

    Generate PNG screenshots for release notes using the repository's HtmlRenderer and ScreenshotGenerator tools.

    174 GitHub stars~3.7k tokensUpdated yesterday
    Auto-check passed

  • Git Rebase Main

    oocx/tfplan2md

    Safely rebase the current feature branch on top of the latest origin/main.

    174 GitHub stars~456 tokensUpdated yesterday
    Auto-check passed

  • Next Issue Number

    oocx/tfplan2md

    Determine the next available issue number across all change types (feature, fix, workflow, website) by checking both local docs and remote branches, then reserve it by pushing an empty branch.

    174 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Run Uat

    oocx/tfplan2md

    Run User Acceptance Testing by creating a PR with rendered markdown on GitHub or Azure DevOps.

    174 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Update Workflow Diagram

What does Update Workflow Diagram do?

Convert the mermaid diagram in docs/workflow.md to a blueprint-styled SVG for the website. Update Workflow Diagram is an agent skill from oocx/tfplan2md.md to a blueprint-styled SVG for the website.

When should I use Update Workflow Diagram?

Update Workflow Diagram fits situations like: the workflow diagram in agents.md is updated and needs to be reflected on the website; tasks that involve Diagrams.

How do I install Update Workflow Diagram in Claude Code?

Run `npx skills add oocx/tfplan2md --skill update-workflow-diagram -a claude-code`. Or copy the skill folder (.agents/skills/update-workflow-diagram in oocx/tfplan2md) into .claude/skills/update-workflow-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Update Workflow Diagram in Codex?

Run `npx skills add oocx/tfplan2md --skill update-workflow-diagram -a codex`. Or copy the skill folder (.agents/skills/update-workflow-diagram in oocx/tfplan2md) into .agents/skills/update-workflow-diagram in your project. Codex loads it when a task matches its description.

Can I use Update Workflow Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add oocx/tfplan2md --skill update-workflow-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/update-workflow-diagram, .gemini/skills/update-workflow-diagram, .github/skills/update-workflow-diagram and .opencode/skills/update-workflow-diagram in your project.

What does Update Workflow Diagram need to run?

Going by SKILL.md and its folder, Update Workflow Diagram needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Update Workflow Diagram access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Update Workflow Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Update Workflow Diagram use?

Update Workflow Diagram is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Update Workflow Diagram use?

About 1.3k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Update Workflow Diagram?

Skills that share tags, products or a category with Update Workflow Diagram: Archify Diagrams (tt-a1i/archify, 81k stars), Diagram Design (cathrynlavery/diagram-design, 47k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Update Workflow Diagram?

oocx (a GitHub user) maintains it in oocx/tfplan2md, which has 174 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 7, 2026.

Source: oocx/tfplan2md on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.