mcpField
F
flowchart-creator

flowchart-creator

github.com/mhattingpete设计与 UI689739 次安装14 周前更新
代码仓库

关于 flowchart-creator

flowchart-creator 是用于制作交互式 HTML 流程图和过程图的技能，可将步骤、决策点及可选泳道整理为 HTML 文件。

主要功能

  1. 01交互式 HTML 流程图
  2. 02过程节点与决策节点
  3. 03带标签的连接箭头
  4. 04可选泳道分组
  5. 05纵向或横向布局

适用场景

  1. 01可视化业务流程
  2. 02梳理工作流决策点
  3. 03制作 HTML 过程图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator

安装后在 Claude Code 中输入/flowchart-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/templates/
base_template.html
flowchart_components.html
references/
design_patterns.md
svg_library.md

详细介绍

流程图创建器

创建交互式 HTML 流程图和流程示意图。

使用场景

  • “为[流程]创建流程图”
  • “生成流程图”
  • “为[工作流]制作决策树”
  • “展示工作流可视化效果”

组件

  1. 开始/结束节点：圆角矩形（#48bb78 绿色，#e53e3e 红色）
  2. 流程框：矩形（#4299e1 蓝色）
  3. 决策菱形：菱形（#f59e0b 橙色）
  4. 箭头：带标签的连接路径
  5. 泳道：分组区域（可选）

HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>[Process] Flowchart</title>
  <style>
    body { font-family: system-ui; }
    svg { max-width: 100%; }
    .start-end { fill: #48bb78; }
    .process { fill: #4299e1; }
    .decision { fill: #f59e0b; }
  </style>
</head>
<body>
  <h1>[Process Name] Flowchart</h1>
  <svg viewBox="0 0 800 600">
    
  </svg>
</body>
</html>

节点模式


<rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/>
<text x="400" y="80" text-anchor="middle">Start</text>


<rect x="350" y="150" width="100" height="60" class="process"/>
<text x="400" y="185" text-anchor="middle">Process</text>


<path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/>
<text x="400" y="285" text-anchor="middle">Decision?</text>


<path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>

工作流

  1. 将流程拆分为各个步骤
  2. 找出决策点
  3. 垂直或水平排列节点
  4. 用箭头连接
  5. 为决策分支添加标签
  6. 写入 [process]-flowchart.html

保持布局简洁，间距一致（节点间距为 100px）。

评论

支持 Markdown