tone-row/flowchart-fun

これは何？

主な機能

• 01インデント付きのプレーンテキスト入力からフローチャートを生成します。
• 02前に登場したノードへ戻るループ状の接続に対応しています。
• 03Reactとcytoscape.jsを使って構築・描画されています。
• 04インターフェースのテキストは.poロケールファイルで翻訳できます。
• 05JestによるユニットテストとPlaywrightによるエンドツーエンドテストを備えています。

ユースケース

• メモからプロセスフローや決定木を手早くスケッチする。
• ユーザーフローやシステムロジックを、実装前に計画する。
• 文章で書いたアウトラインを共有可能な図に変換する。

クイックスタート

1. 1

   リポジトリをクローンする

2. 2

   .env.example を .env にコピーし、環境変数を追加する

3. 3

   pnpm で依存関係をインストールする

   pnpm install
4. 4

   shared パッケージと formulaic パッケージをビルドする

   pnpm -F shared build && pnpm -F formulaic build
5. 5

   ログイン機能なしでアプリを実行する

   pnpm dev

使う前に知っておきたいこと

• !ログイン機能を含むアプリ全体を実行するには、Vercel、Supabase、Stripe、Sendgrid のアカウントが必要です。
• !ログイン機能を有効にしてデプロイするには、サーバーレス関数を12個以上使用するため、Vercel Pro アカウントが必要です。

トピック

よくある質問

flowchart-fun とは？

Reactとcytoscape.jsで構築された、プレーンテキストのアウトラインをフローチャートや図に変換するWebアプリ。 Flowchart Funは、テキストからフローチャートを生成します。インデント付きのプレーンテキスト構文でノードとその接続を記述すると、ブラウザー上に図として表示されるため、図形をドラッグして配置することなく、アイデアや計画を手早くスケッチできます。

flowchart-fun は無料で使えますか？ライセンスは？

flowchart-fun は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

flowchart-fun は今もメンテナンスされていますか？

活発にメンテナンス中。flowchart-fun の最終コミットは 2026年10月16日 です。

flowchart-fun は何に使えますか？

メモからプロセスフローや決定木を手早くスケッチする。 ユーザーフローやシステムロジックを、実装前に計画する。 文章で書いたアウトラインを共有可能な図に変換する。

flowchart-fun のインストール方法は？

リポジトリをクローンする .env.example を .env にコピーし、環境変数を追加する pnpm で依存関係をインストールする: pnpm install shared パッケージと formulaic パッケージをビルドする: pnpm -F shared build && pnpm -F formulaic build ログイン機能なしでアプリを実行する: pnpm dev

flowchart-fun はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/tone-row/flowchart-fun