flowchart-creator

Name: flowchart-creator
Author: mhattingpete

github.com/mhattingpeteデザイン・UI689739 回インストール14 週間前に更新

リポジトリ

flowchart-creator について

flowchart-creatorは、インタラクティブなHTMLフローチャートやプロセス図を作成するスキルです。手順や判断点、任意のスイムレーンをHTMLファイルにまとめます。

主な機能

01インタラクティブなHTMLフローチャート
02プロセスノードと判断ノード
03ラベル付きの接続矢印
04任意のスイムレーン分け
05縦型または横型のレイアウト

活用シーン

01業務プロセスの可視化
02ワークフローの判断点の整理
03HTMLプロセス図の作成

インストール

コマンドをコピーしてターミナルで実行します。

$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 フローチャートやプロセス図を作成します。

使用する場面

「[process] のフローチャートを作成」
「プロセスフロー図を生成」
「[workflow] の判断ツリーを作成」
「ワークフローを視覚化」

コンポーネント

開始／終了ノード：角丸長方形（#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">
    
  </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)"/>