generate-workflow-diagram
À propos
Cette compétence génère des diagrammes de flux Mermaid à partir de données de workflow annotées, prenant en charge neuf thèmes et plusieurs formats de sortie. Elle permet aux développeurs de créer une documentation visuelle pour les fichiers README, Quarto ou R Markdown avec des fonctionnalités interactives telles que des nœuds cliquables. Utilisez-la pour produire ou mettre à jour des diagrammes après des modifications du workflow, ou pour adapter les visuels à différents publics.
Installation rapide
Claude Code
Recommandénpx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/generate-workflow-diagramCopiez et collez cette commande dans Claude Code pour installer cette compétence
Documentation
Generate Workflow Diagram
Themed Mermaid flowchart from putior data → embed in docs.
Use When
- After annotating sources → produce visual
- Regenerate after workflow changes
- Switch themes/formats for audiences
- Embed in README, Quarto, R Markdown
In
- Required: workflow data from
put(),put_auto(), orput_merge() - Optional: theme (default
"light"; light, dark, auto, minimal, github, viridis, magma, plasma, cividis) - Optional: out target (console, file, clipboard, raw)
- Optional: interactive (
show_source_info,enable_clicks)
Do
Step 1: Extract workflow data
library(putior)
# From manual annotations
workflow <- put("./src/")
# From manual annotations, excluding specific files
workflow <- put("./src/", exclude = c("build-workflow\\.R$", "test_"))
# From auto-detection only
workflow <- put_auto("./src/")
# From merged (manual + auto)
workflow <- put_merge("./src/", merge_strategy = "supplement")
node_type → Mermaid shape:
node_type | Mermaid Shape | Use Case |
|---|---|---|
"input" | Stadium ([...]) | Data sources, configuration files |
"output" | Subroutine [[...]] | Generated artifacts, reports |
"process" | Rectangle [...] | Processing steps (default) |
"decision" | Diamond {...} | Conditional logic, branching |
"start" / "end" | Stadium ([...]) | Entry/terminal nodes |
Each → CSS class (class nodeId input;) for theme styling.
→ DF w/ ≥1 row: id, label + optional input, output, source_file, node_type.
If err: empty → no annotations/patterns. Run analyze-codebase-workflow or check syntax: put("./src/", validate = TRUE).
Step 2: Select theme + options
# List all available themes
get_diagram_themes()
# Standard themes
# "light" — Default, bright colors
# "dark" — For dark mode environments
# "auto" — GitHub-adaptive with solid colors
# "minimal" — Grayscale, print-friendly
# "github" — Optimized for GitHub README files
# Colorblind-safe themes (viridis family)
# "viridis" — Purple→Blue→Green→Yellow, general accessibility
# "magma" — Purple→Red→Yellow, high contrast for print
# "plasma" — Purple→Pink→Orange→Yellow, presentations
# "cividis" — Blue→Gray→Yellow, maximum accessibility (no red-green)
Extra params:
direction:"TD"(top-down, default),"LR","RL","BT"show_artifacts: show artifact nodes (noisy for large, 16+ extra)show_workflow_boundaries: wrap source file nodes in subgraphsource_info_style: source file display (subtitle)node_labels: label format
→ Theme names printed. Pick by context.
If err: unrecognized → falls back "light". Check spelling.
Step 3: Custom palette w/ put_theme() (opt)
# Create custom palette — unspecified types inherit from base theme
cyberpunk <- put_theme(
base = "dark",
input = c(fill = "#1a1a2e", stroke = "#00ff88", color = "#00ff88"),
process = c(fill = "#16213e", stroke = "#44ddff", color = "#44ddff"),
output = c(fill = "#0f3460", stroke = "#ff3366", color = "#ff3366"),
decision = c(fill = "#1a1a2e", stroke = "#ffaa33", color = "#ffaa33")
)
# Use the palette parameter (overrides theme when provided)
mermaid_content <- put_diagram(workflow, palette = cyberpunk, output = "raw")
writeLines(mermaid_content, "workflow.mmd")
Accepts: input, process, output, decision, artifact, start, end. Each takes c(fill = "#hex", stroke = "#hex", color = "#hex"). Unset → base theme.
→ Mermaid out w/ custom classDef. Shapes preserved from node_type, colors change. All use stroke-width:2px (not overridable via put_theme()).
If err: not putior_theme class → descriptive err. Pass put_theme() return, not raw list.
Fallback — manual classDef replacement (fine-grained per-type stroke widths):
mermaid_content <- put_diagram(workflow, theme = "dark", output = "raw")
lines <- strsplit(mermaid_content, "\n")[[1]]
lines <- lines[!grepl("^\\s*classDef ", lines)]
custom_defs <- c(" classDef input fill:#1a1a2e,stroke:#00ff88,stroke-width:3px,color:#00ff88")
mermaid_content <- paste(c(lines, custom_defs), collapse = "\n")
Step 4: Generate Mermaid
# Print to console (default)
cat(put_diagram(workflow, theme = "github"))
# Save to file
writeLines(put_diagram(workflow, theme = "github"), "docs/workflow.md")
# Get raw string for embedding
mermaid_code <- put_diagram(workflow, output = "raw", theme = "github")
# With source file info (shows which file each node comes from)
cat(put_diagram(workflow, theme = "github", show_source_info = TRUE))
# With clickable nodes (for VS Code, RStudio, or file:// protocol)
cat(put_diagram(workflow,
theme = "github",
enable_clicks = TRUE,
click_protocol = "vscode" # or "rstudio", "file"
))
# Full-featured
cat(put_diagram(workflow,
theme = "viridis",
show_source_info = TRUE,
enable_clicks = TRUE,
click_protocol = "vscode"
))
→ Valid Mermaid starting flowchart TD (or LR by direction). Nodes connected by arrows.
If err: flowchart TD no nodes → empty DF. Missing connections → check output filenames match input filenames across nodes.
Step 5: Embed in doc
GitHub README (```mermaid fence):
## Workflow
```mermaid
flowchart TD
A["Extract Data"] --> B["Transform"]
B --> C["Load"]
```
Quarto (native mermaid chunk via knit_child):
# Chunk 1: Generate code (visible, foldable)
workflow <- put("./src/")
mermaid_code <- put_diagram(workflow, output = "raw", theme = "github")
# Chunk 2: Output as native mermaid chunk (hidden)
#| output: asis
#| echo: false
mermaid_chunk <- paste0("```{mermaid}\n", mermaid_code, "\n```")
cat(knitr::knit_child(text = mermaid_chunk, quiet = TRUE))
R Markdown (mermaid.js CDN or DiagrammeR):
DiagrammeR::mermaid(put_diagram(workflow, output = "raw"))
→ Renders in target format. GitHub native mermaid fence render.
If err: GitHub no render → fence must be exactly ```mermaid (no extra attrs). Quarto → use knit_child() (direct var interpolation in {mermaid} not supported).
Check
-
put_diagram()valid Mermaid (startsflowchart) - All expected nodes appear
- Arrows between connected nodes
- Theme applied (check init block)
- Renders in target format
Traps
- Empty diagrams:
put()no rows → check annotations + syntax. - All nodes disconnected: output filenames must exactly match input (inc ext).
data.csv≠Data.csv. - Theme not visible on GitHub: limited theme support.
"github"designed for GitHub.%%{init:...}%%may be ignored. - Quarto var interpolation:
{mermaid}no R vars. Useknit_child(). - Clickable not working: need renderer w/ Mermaid interaction. GitHub static no clicks. Use local Mermaid or putior Shiny sandbox.
- Self-referential meta-pipeline: scanning dir w/ build script → duplicate subgraph IDs + Mermaid errs. Use
exclude:workflow <- put("./src/", exclude = c("build-workflow\\.R$", "build-workflow\\.js$")) show_artifacts = TRUEnoisy: large projects → 10-20+ artifact nodes. Use FALSE + rely onnode_typefor key in/out.
→
annotate-source-files— prereq before genanalyze-codebase-workflow— auto-detect supplements manualsetup-putior-ci— automate regen in CI/CDcreate-quarto-report— embed in Quartobuild-pkgdown-site— embed in pkgdown
Dépôt GitHub
Compétences associées
content-collections
MétaCette compétence propose une configuration éprouvée en production pour Content Collections, un outil axé sur TypeScript qui transforme des fichiers Markdown/MDX en collections de données typées de manière sûre avec une validation Zod. Utilisez-la lors de la création de blogs, de sites de documentation ou d'applications Vite + React riches en contenu pour garantir la sécurité de typage et la validation automatique du contenu. Elle couvre tout, de la configuration du plugin Vite et de la compilation MDX à l'optimisation des déploiements et la validation des schémas.
polymarket
MétaCette compétence permet aux développeurs de créer des applications avec la plateforme de marchés prédictifs Polymarket, incluant l'intégration d'API pour le trading et les données de marché. Elle fournit également une diffusion de données en temps réel via WebSocket pour surveiller les transactions en direct et l'activité du marché. Utilisez-la pour mettre en œuvre des stratégies de trading ou pour créer des outils traitant les mises à jour de marché en direct.
creating-opencode-plugins
MétaCette compétence aide les développeurs à créer des plugins OpenCode qui s'interconnectent avec plus de 25 types d'événements tels que les commandes, les fichiers et les opérations LSP. Elle fournit la structure du plugin, les spécifications de l'API événementielle et les modèles d'implémentation pour les modules JavaScript/TypeScript. Utilisez-la lorsque vous avez besoin d'intercepter, de surveiller ou d'étendre le cycle de vie de l'assistant IA OpenCode avec une logique personnalisée pilotée par les événements.
sglang
MétaSGLang est un framework de service LLM haute performance spécialisé dans la génération rapide et structurée pour les workflows JSON, regex et agentiques grâce à son cache de préfixe RadixAttention. Il offre une inférence nettement plus rapide, particulièrement pour les tâches avec des préfixes répétés, ce qui le rend idéal pour les sorties complexes et structurées ainsi que les conversations multi-tours. Choisissez SGLang plutôt que des alternatives comme vLLM lorsque vous avez besoin d'un décodage contraint ou que vous construisez des applications avec un partage étendu de préfixes.
