generate-workflow-diagram
关于
This skill generates Mermaid flowchart diagrams from annotated workflow data, supporting nine themes and multiple output formats. It enables developers to create visual documentation for README files, Quarto, or R Markdown with interactive features like clickable nodes. Use it to produce or update diagrams after workflow changes or to adapt visuals for different audiences.
快速安装
Claude Code
推荐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-diagram在 Claude Code 中复制并粘贴此命令以安装该技能
技能文档
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
GitHub 仓库
相关推荐技能
content-collections
元Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。
polymarket
元这个Claude Skill为开发者提供完整的Polymarket预测市场开发支持,涵盖API调用、交易执行和市场数据分析。关键特性包括实时WebSocket数据流,可监控实时交易、订单和市场动态。开发者可用它构建预测市场应用、实施交易策略并集成实时市场预测功能。
creating-opencode-plugins
元该Skill帮助开发者创建OpenCode插件,用于接入命令、文件、LSP等25+种事件。它提供了插件结构、事件API规范和JavaScript/TypeScript实现模式,适合需要拦截操作、扩展功能或自定义事件处理的场景。开发者可通过它快速构建响应式模块来增强OpenCode AI助手的能力。
sglang
元SGLang是一个专为LLM设计的高性能推理框架,特别适用于需要结构化输出的场景。它通过RadixAttention前缀缓存技术,在处理JSON、正则表达式、工具调用等具有重复前缀的复杂工作流时,能实现极速生成。如果你正在构建智能体或多轮对话系统,并追求远超vLLM的推理性能,SGLang是理想选择。
