😁

「箱をドラッグする時間」を0にしたくてAIフローチャートツールを作った

に公開
Claude
Antigravity
idea

TL;DR

  • フローチャート作成の80%は「箱をドラッグする時間」
  • AIに話しかけるだけで図が完成するツール「DrillSpark」を作った
  • Mermaid.js出力だからGitHub/Notionにそのまま貼れる
  • 今日Product Huntでローンチ中 🚀

課題：図を描く時間 > 考える時間

業務フローやシステム設計を図にするとき、こんな経験ありませんか？

  • 箱をドラッグして、線を引いて、位置を調整して...
  • 複雑になると図がスパゲッティ化
  • 修正のたびに配置し直し
  • 結局、最新の図がどこにあるか分からない

20%が「考える時間」、80%が「箱を動かす時間」

これを逆転させたくて、DrillSparkを作りました。

作ったもの

DrillSpark - AIと会話してフローチャートを作成するツール

https://drillspark.io

こんな感じで使う

あなた：「ユーザー登録フローを作って。メール認証とSNSログインに対応」

AI：「パスワードリセットなどの例外処理を追加することも可能です。」

あなた：「お願い」



→ 会話しながら図が完成していく

主な機能

💬 対話型のAI生成

一発プロンプトではなく、対話で詰めていく。
「エラー処理どうする？」「この分岐の条件は？」とAIが聞いてくる。

🧬 階層ドリルダウン

全体図はシンプルに保ちつつ、ノードをクリックすると詳細フローに潜れる。
「認証」ノード → クリック → 認証の詳細フローが展開

💻 Mermaid.js出力

graph TD
  subgraph sg_0 ["検証フェーズ"]
    4_1["SNS認証トークンを検証する<br/>⏱ 1 分"]
    %% duration[4_1]: 1
    4_2{"トークンは有効か?<br/>⏱ 1 分"}
    %% duration[4_2]: 1
  end
  subgraph sg_1 ["DB照合フェーズ"]
    4_3{"登録ユーザーか?<br/>⏱ 2 分"}
    %% duration[4_3]: 2
    4_4["新規ユーザーをDBに作成する<br/>⏱ 5 分"]
    %% duration[4_4]: 5
    4_5["最終ログイン日時を更新する<br/>⏱ 1 分"]
    %% duration[4_5]: 1
  end
  subgraph sg_2 ["セッション確立フェーズ"]
    4_6["セッションCookieを発行する<br/>⏱ 1 分"]
    %% duration[4_6]: 1
    4_End_Yes["はい"]
    4_End_No["いいえ"]
  end
    4_1 --> 4_2
    4_2 -->|"有効"| 4_3
    4_2 -->|"無効"| 4_End_No
    4_3 -->|"未登録"| 4_4
    4_3 -->|"登録済"| 4_5
    4_4 --> 4_6
    4_5 --> 4_6
    4_6 --> 4_End_Yes

テキストだからGit管理できる。PRでdiffが見れる。

エクセルライクな編集

Excelのように表形式で編集できます。
現場のITに疎いユーザーもこれで安心です！

技術スタック

領域 技術
Frontend Next.js 16 + React 19 + TypeScript
Backend Supabase (PostgreSQL)
AI Gemini API
エディタ Monaco Editor
可視化 Mermaid.js

想定ユーザー

  • 業務フローを整理したいコンサルタント
  • システム設計を可視化したいテックリード
  • ドキュメントを書くのが面倒なエンジニア

Product Huntでローンチ中

今日（2/4）Product Huntでローンチしています。

👉 DrillSpark on Product Hunt

フィードバックやupvoteいただけると嬉しいです 🙏

おわりに

「図を描く」から「図を会話で作る」へ。

まだまだ改善点はありますが、複雑なロジックを整理するときの相棒になれたら嬉しいです。

質問・フィードバックあればコメントください！

Discussion