流程图创建器 - 在线生成交互式HTML流程图、决策树和工作流可视化工具

flowchart-creator by mhattingpete/claude-skills-marketplace

104 周安装量

493 GitHub Stars

GitHub

安装命令

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

内容创作数据可视化开发

🇨🇳中文介绍

流程图创建器

创建交互式 HTML 流程图和过程图。

使用场景

"为 [流程] 创建流程图"
"生成过程流程图"
"为 [工作流] 制作决策树"
"展示工作流可视化"

组件

开始/结束节点 : 圆角矩形 (#48bb78 绿色, #e53e3e 红色)
过程框 : 矩形 (#4299e1 蓝色)
决策菱形 : 菱形 (#f59e0b 橙色)
箭头 : 带标签的连接路径
泳道 : 分组区域 (可选)

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">
    <!-- flowchart nodes and connectors -->
  </svg>
</body>
</html>

节点模式

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

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

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

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Flowchart Creator

Create interactive HTML flowcharts and process diagrams.

When to Use

"Create flowchart for [process]"
"Generate process flow diagram"
"Make decision tree for [workflow]"
"Show workflow visualization"

Components

Start/End nodes : rounded rectangles (#48bb78 green, #e53e3e red)
Process boxes : rectangles (#4299e1 blue)
Decision diamonds : diamonds (#f59e0b orange)
Arrows : connecting paths with labels
Swimlanes : grouped sections (optional)

HTML Structure

<!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">
    <!-- flowchart nodes and connectors -->
  </svg>
</body>
</html>

Node Patterns

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

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

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

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

Workflow

Break down process into steps
Identify decision points
Layout nodes vertically or horizontally
Connect with arrows
Add labels to decision branches
Write to [process]-flowchart.html

Keep layout clean, use consistent spacing (100px between nodes).

Weekly Installs

104

Repository

mhattingpete/cl…ketplace

GitHub Stars

493

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode86

codex85

gemini-cli84

cursor83

github-copilot82

kimi-cli76