Show HN: Flostep – 人が実際にウォークスルーできるダイアグラム

⚡ 人が実際にウォークスルーできるダイアグラム システム設計フローをスケッチ、ウォークスルー、共有する最速の方法 — コンポーネントをドラッグし、接続し、各インタラクションをステップバイステップで提示します。 無料で構築を開始 今すぐ試す → 試すのにアカウントは不要です 構築、共有、保存 実際の例を見る これはスクリーンショットではなく、ライブのFlostepダイアグラムです。▶開始をヒットして、自分でウォークスルーしてください。 共有されるすべてのダイアグラムは、このように埋め込まれます — 1つのiframe、あらゆるサイト。 あなた自身のダイアグラムを構築 → 仕組み 空白のキャンバスから、完全にウォークスルー可能なフローまで数分で。 🖱️ ステップ1 コンポーネントのドラッグ＆ドロップ フロントエンド、サービス、データベース、キャッシュ、キュー、外部APIから選択するか、カスタムコンポーネントを作成します。キャンバスに配置します。 🔗 ステップ2 インタラクションの接続とラベル付け 発生順にコンポーネント間に矢印を描きます。それぞれにラベルを付けます — "POST /login"、"returns JWT"、"cache miss"。 同じペア間の複数のインタラクションも問題ありません。 ▶️ ステップ3 ウォークスルー 次へをヒットして、各インタラクションを一度に1つずつステップスルーします。アクティブなステップがハイライトされ、残りはフェードアウトします。設計レビュー、オンボーディング、面接に最適です。 必要なすべて 煩わしさなし。 bloatなし。 システム設計に必要なツールだけ。 📝 コードからダイアグラムへのインポート プレーンなA -> B: action linesを貼り付けると、キャンバスが自動的に構築されます。 💬 共有リンクへのコメント リンクを送信して、フィードバックを一元的に収集します。 レビュー担当者はアカウントなしで名前でコメントできるため、非同期設計レビューが会議になる必要はありません。 🔗 共有可能なリンク ワンクリックで公開読み取り専用リンクを生成します。 誰でもアカウントなしでフローをステップスルーできます。 🖼️ どこにでも埋め込み可能 Notion、Confluence、ブログに単一の<iframe>をドロップします — 完全なインタラクティブウォークスルーがそこにあります。 📋 ノート トレードオフ、未解決の質問、発見事項のための専用ノートパネル — ダイアグラムと一緒に保存されるため、コンテキストが失われることはありません。 ☁️ 常に保存 すべての変更は自動的にクラウドに保存されます。 どのデバイスからでも、中断したところから正確に再開できます。手動保存は不要です。 🔌 MCPと連携 AIアシスタントに描画させる FlostepはModel Context Protocolに対応しているため、Claude、Cursor、VS Code、Windsurfなどが、説明から、またはそれらがすでに参照しているコードベースから直接、ダイアグラムを作成できます。 一度接続 claude mcp add --transport http \ flostep https://flostep.dev/mcp \ --header "Authorization: Bearer fls_…" Claude Code用の1つのコマンド、または他のMCPクライアント用の数行のJSON。 その後、「ここでパスワードリセットがどのように機能するかをFlostepダイアグラムで作成し、共有リンクを提供してください」と尋ねるだけです。 「キューとワーカーの間にリトライステップを追加してください。」 既存のダイアグラムも読み取れるため、編集は実際の対象に適用されます — 推測ではありません。 MCPガイドを読む → 重要な瞬間のために構築 🎙️ システム設計面接 静的な塊を指差すのではなく、コンポーネントごとに面接官に設計を説明します。 🏗️ アーキテクチャスパイク コードを書く前に新しい機能のマッピングを行います。 バグになる前に、見落とされたエッジケースを検出します。 🧑‍🏫 新しいエンジニアのオンボーディング 認証フローやチェックアウトパイプラインのライブウォークスルーを、オンボーディングドキュメントに直接埋め込みます。 🔍 非同期設計レビュー リンクを共有し、チームメイトに特定のステップにコメントを残してもらい、別の会議をスケジュールすることなくイテレーションします。 よくある質問 最初のフローの前に知っておくべきことすべて。 Flostepを試すのにアカウントは必要ですか？ いいえ。「今すぐ試す」をヒットして、すぐに構築を開始してください — ダイアグラムはブラウザに保存されます。 恒久的に保存して安定した共有リンクを取得したい場合は、無料アカウントを作成してください。 実際に何が構築できますか？ システム設計フロー — フロントエンド、サービス、データベース、キャッシュ、キュー、外部APIコンポーネント（またはカスタムコンポーネント）をドラッグし、インタラクションの発生順に接続し、各ステップにラベルを付け、次に1ホップずつウォークスルーします。 共有はどのように機能しますか？ ワンクリックで公開読み取り専用リンクが生成されます。 誰でもインタラクティブにフローをステップスルーできます — アカウントは不要です。 また、単一のiframeで完全なウォークスルーをNotion、Confluence、またはドキュメントに埋め込むこともできます。 既存のダイアグラムをインポートできますか？ はい。プレーンなA -> B: action linesをコードビューに貼り付けると、キャンバスが自動的に構築されます。 ClaudeやCursorは私にダイアグラムを作成できますか？ はい。FlostepはMCPサーバーなので、Model Context Protocolに対応しているアシスタント（Claude、Cursor、VS Code、Windsurfなど）は、ダイアグラムを作成、読み取り、編集、共有できます。 APIキーを作成し、一度接続してから、平易な言葉で質問してください。 MCPガイドを参照してください。 料金はいくらですか？ 本当に無料のプランと、無制限のダイアグラムとその他の機能のためのProプランがあります。 詳細については、価格ページを参照してください。 ステップで考える準備はできましたか？ 無料で開始。 クレジットカード不要。 最初のフローを2分以内に構築。 無料アカウントを作成