Flowmaker

生成单 HTML、零后端、可拖拽编辑的网页流程图。LLM 只产出 nodes/edges 的 JSON，引擎自动布局并渲染成浅色玻璃风、带判断菱形/起止圆角条/处理矩形三种形状的可交互流程图（拖节点、拖连线、双击改名、面板增删）。Use when 用户要"做流程图/画流程图/把流程画出来/流程可视化/flowchart/泳道/判断分支图"，尤其要可在浏览器里编辑、且要一个独立 HTML 文件不带后端。NOT for 纯静态示意图（直接 mermaid 即可）、需要服务端渲染的大批量图表。

25 stars 4 forksAI, LLMs & Agents

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add xntj-ai/flowmaker --skill flowmaker

Manual install

git clone --depth 1 https://github.com/xntj-ai/flowmaker.git /tmp/flowmaker
mkdir -p ~/.claude/skills
cp -r /tmp/flowmaker/. ~/.claude/skills/flowmaker

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# flowmaker — 单 HTML 网页流程图生成器

把一段流程描述，变成一个**自包含 HTML 文件**：浅色 ppvi 玻璃风、可拖拽编辑、零后端、双击文件即开。引擎（React Flow + dagre + 三形状）已封装在 `assets/template.html`，你只需产出流程的 JSON 数据并注入模板。

## 工作流

1. **澄清流程**（信息不足时）：起点/终点、关键步骤、判断分支、各分支去向。能从描述推断就直接画，别过度追问。
2. **建数据**：把流程拆成 `nodes` + `edges`，写成下方 schema 的 JSON。
   - 优先**省略坐标**，让 dagre 自动布局（最省事，任意流程都能排）。
   - 只有要精确复刻某个版式时才手动给 `x`/`y`（给了坐标就不触发自动布局）。
3. **生成文件**：复制 `assets/template.html` → 把 `<script id="flow-data">` 块整体替换为你的 JSON → 把 `<title>__TITLE__</title>` 的 `__TITLE__` 换成流程标题 → 另存为 `outputs/{YYYY-MM-DD}-{主题}-flowchart.html`。
4. **打开验证**：用浏览器打开确认渲染正常（节点、连线、菱形、可拖拽）。

## 数据 Schema

```json
{
  "title": "顶栏标题",
  "subtitle": "顶栏副标题（可省略）",
  "direction": "TB",
  "nodes": [
    { "id": "唯一id", "title": "主标题", "sub": "子标题/概述(可省)", "kicker": "小标签(可省)",
      "detail": "点「详情 ▾」弹层显示的长内容(可省，支持多行)",
      "shape": "process|terminator|decision", "variant": "|start|gold|muted",
      "x": 0, "y": 0 }
  ],
  "edges": [
    { "source": "id", "target": "id", "label": "线上文字(可省)",
      "dashed": false, "sh": "b", "th": "t" }
  ]
}
```

字段说明：

| 字段 | 取值 | 含义 |
|---|---|---|
| `shape` | `process`（默认，矩形）/ `terminator`（起止，圆角条）/ `decision`（判断，扁菱形） | 节点形状 |
| `variant` | 空（普通）/ `start`（蓝，起点）/ `gold`（金，强调/终点）/ `muted`（灰虚线，弱化/失败分支） | 配色 |
| `kicker` | 短文本 | 节点上方小标签；**菱形节点会自动隐藏 kicker/sub，只显示一行灰色小字**，所以判断节点只写 `title` |

Read the full skill on GitHub

Details

Skill name: flowmaker
Repository: xntj-ai/flowmaker
License: MIT
Repo updated: 16 June 2026

FAQ

What does the Flowmaker skill do?

How do I install the Flowmaker skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add xntj-ai/flowmaker --skill flowmaker. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Flowmaker popular?

It lives in xntj-ai/flowmaker, which has 25 GitHub stars and 4 forks.

Related skills

Interest Radar

Igloo302/interest-radar

通用相关性判断引擎（兴趣雷达/Interest Radar/Personal Radar）：接收外部内容，利用用户的个人上下文判断内容与用户的相关程度。平台无关，可在各种 Agent 平台上运行。触发场景：(1) 用户转发/粘贴链接/消息并询问相关性；(2) 用户要求分析某条内容与项目的关联；(3) 用户提到"兴趣雷达"、"personal radar"、"相关性判断"；(4) 其他推送 Skill 调用 batch_judge 增强推送质量。

AI, LLMs & Agents

Agent Credit

aaronjmars/agent-credit

Borrow from Aave V3 via credit delegation. Agent draws against delegator collateral. Supports borrow, repay, health checks.

AI, LLMs & Agents

LangSmith Fetch

OthmanAdi/langsmith-fetch-skill

Debug LangChain agents via LangSmith execution traces. Fetch and analyze traces to understand agent behavior and debug issues.

AI, LLMs & Agents

Specification Website

tcsenpai/specification-website-skill

Apply The Website Specification — a platform-agnostic specification of what a good website does, with each item tagged required, recommended, optional, or avoid. Use when the user asks what their site should have, whether something is required, how to audit a URL, what's missing for agent readiness, or anything else where you'd otherwise be guessing at web best practice. Covers HTML foundations, SEO, accessibility, security, well-known URIs, agent readiness, performance, privacy, resilience, and internationalisation. Backs answers with primary sources (WHATWG, W3C, IETF RFCs, IANA, WCAG, schem

AI, LLMs & Agents

Semantic Trap Detector

Jumbo-WJB/semantic-trap-detector

Detect and fix semantic traps in Claude Skills that cause LLM hallucinations. Use for testing skills, optimizing prompts, improving skill accuracy, fixing skill hallucinations, LLM output quality, and prompt engineering.

AI, LLMs & Agents

Search Answer Reviewer

57-H/search-answer-reviewer

Web search review. Use when an agent is about to search the web, receives web search results or retrieved pages, or checks an answer based on them. Activate before the first search; review results before using them, even without an explicit audit request. 中文：网页搜索前启用，结果返回后审查。

AI, LLMs & Agents

Browse the most popular Claude skills, all ai, llms & agents skills, or write your own with the skills generator.