Creates a dark-themed React/Recharts stacked area Cumulative Flow Diagram (CFD) for the **CFD Data** tool (mcs-mcp:generate_cfd_data). Trigger on: "CFD", "cumulative flow diagram", "flow diagram", "WIP by status over time", "show the CFD", or any "show/chart/plot/visualize that" follow-up after a generate_cfd_data result is present. Use ONLY when generate_cfd_data data is present in the conversation AND a confirmed workflow mapping (workflow_discover_mapping) exists. Always read this skill before building the chart — do not attempt it ad-hoc. --- # Cumulative Flow Diagram > **Also read:** `mcs-charts-base` SKILL before implementing. It defines the page/panel > wrappers, color tokens, typography, header structure, badge system, CartesianGrid, > tooltip base style, area gradient pattern, legend pattern, interactive controls, footer > structure, and universal checklist items. This skill only specifies what is unique to > this chart. > **Scope:** Use this skill ONLY when `generate_cfd_data` data is present in the > conversation. It is exclusively for visualizing the daily per-status item population > as a stacked area chart, stratified by issue type. --- ## Prerequisites
guohaonan-shy
from GitHub
开发与编程
Code-first Excalidraw diagram generation with SVG and PNG export. Use when asked to "create a diagram", "draw a flowchart", "generate an architecture diagram", "export diagram to SVG", "export diagram to PNG", or "visualize a process". Produces .excalidraw, .svg, and .png files using the excalidrawer npm package — no browser required.
- 📁 references/
- 📁 scripts/
- 📄 README.md
- 📄 SKILL.md
Generates GitHub-compatible Mermaid diagrams that render correctly in markdown files, pull requests, issues, and comments. Supports all Mermaid diagram types with tested color palettes for light and dark mode. Provides local SVG/PNG preview via mermaid CLI and GitHub rendering preview via private gists. Use when the user asks to create a diagram, flowchart, sequence diagram, ER diagram, architecture diagram, state machine, Gantt chart, or any Mermaid visualization for GitHub.
ferdinandobons
from GitHub
运维与交付
- 📁 examples/
- 📁 references/
- 📄 SKILL.md
Generate beautiful, production-ready architecture diagrams as self-contained HTML files from any input. Use this skill whenever the user wants to create a diagram, schema, flowchart, network diagram, system visualization, timeline, org chart, or any visual representation of concepts — technical or non-technical. Trigger when the user mentions "diagram", "schema", "architecture", "flow", "topology", "pipeline", "timeline", "visualize", "graph", or asks to turn a file into a visual diagram. Accepts ANY file type as input (.md, .txt, .json, .yaml, .csv, .pdf, .py, .ts, .toml, .env, .tf, .dockerfile, etc.) — Claude auto-detects the format and extracts relevant structure to diagram. Even a simple sentence like "diagram of how OAuth works" or "visualize this file" triggers this skill.