Flowzap

FlowZap Code DSL — 公式構文と例

FlowZap Code は、ビジネスプロセスの共同マッピングとワークフロー自動化のための、シンプルなドメイン固有言語（DSL）です。自然で読みやすいコードを書いて、フローチャート、スイムレーン図、シーケンス図、アーキテクチャ図を作成できます。技術的なスキルは必要ありません！

• Webサイト： https://flowzap.xyz
• 構文ガイド： flowzap.xyz/flowzap-code
• AI ガイドライン： flowzap.xyz/flowzap-code-guidelines.md
• テンプレート： flowzap.xyz/templates — すぐに使えるワークフロー、シーケンス、アーキテクチャ図のテンプレートを250種類以上掲載
• MCP サーバー： flowzap.xyz/docs/mcp — Claude Desktop、Cursor、Windsurf、およびその他8つのコーディングツールに対応
• エージェントスキル： skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams
• npm： flowzap-mcp

---

⚡ 簡単な例：結婚式の準備プロセス

couple { # couple
  n1: circle label:"Start Planning"
  n2: rectangle label:"Define Budget & Priorities"
  n3: rectangle label:"Review Proposals"
  n4: rectangle label:"Make Final Decisions"
  n5: circle label:"Wedding Day!"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(right) -> n4.handle(left)
  n4.handle(right) -> n5.handle(left)
  n2.handle(bottom) -> planner.n6.handle(top) [label="Hires"]
}

planner { # planner
  n6: rectangle label:"Initial Consultation"
  n7: rectangle label:"Create Planning Timeline"
  n8: rectangle label:"Coordinate Vendors"
  n9: rectangle label:"Final Walkthrough"
  n6.handle(right) -> n7.handle(left)
  n7.handle(right) -> n8.handle(left)
  n8.handle(right) -> n9.handle(left)
  n7.handle(bottom) -> vendors.n10.handle(top) [label="Requests"]
}

vendors { # vendors
  n10: rectangle label:"Receive Requirements"
  n11: diamond label:"Available?"
  n12: rectangle label:"Send Proposal"
  n13: rectangle label:"Confirm Booking"
  n10.handle(right) -> n11.handle(left)
  n12.handle(right) -> n13.handle(left)
  n11.handle(right) -> n12.handle(left) [label="No"]
  n11.handle(bottom) -> n12.handle(bottom) [label="Yes"]
  n12.handle(top) -> couple.n3.handle(bottom) [label="Sends"]
}

https://flowzap.xyz で無料アカウントを作成してください。その後、上記の内容を FlowZap ワークスペースに貼り付けると、最初のワークフロー図、シーケンス図、アーキテクチャ図を数秒で可視化できます。

---

🤝 貢献

• フォークして、新しいコード例や提案をプルリクエストで送ってください！
• 構文に関する質問やドキュメントの修正については、イシューを作成してください。
• 詳細は CONTRIBUTING.md をご覧ください。

---

📖 ドキュメント

• 構文ルール — シーケンス図のベストプラクティスを含みます（v1.3.4）
• AI コーディングガイドライン — FlowZap Code を生成する AI アシスタント向けの手順
• AI ガイドラインをダウンロード — AI コーディングツール用に、このファイルをプロジェクトの /docs/ フォルダーに追加してください
• テンプレートライブラリ — ワークフロー、シーケンス、アーキテクチャ図用のすぐに使えるテンプレートを250種類以上掲載
• アーキテクチャ図テンプレート — アーキテクチャ図のテンプレートを50種類掲載（マイクロサービス、イベント駆動、CQRS、サーバーレス、Saga など）
• n8n ワークフロー JSON の例 — FlowZap Code から n8n JSON へのエクスポート
• Make.com Blueprint の例 — FlowZap Code から Make.com JSON へのエクスポート

ブログ

• FlowZap が .fz を発表：シーケンス図と AI ネイティブなワークフローのための、真の Diagram as Code
• FlowZap でバイブコーディングの流れを加速：AI のひらめきを構造化された魔法に変える
• FlowZap MCP サーバーのご紹介
• FlowZap Diagram Skill が公開 — その意義とは
• 1つのコード、3つのビュー：フローチャート＋シーケンス図＋アーキテクチャ図
• CI/CD パイプライン設定の主要なワークフロー10選

🤖 AI エージェントとエージェント型ブラウザー向け

FlowZap は、自動検出のための機械可読リソースを提供しています。

• 構文スキーマ（JSON）： /api/flowzap-code-schema.json
• Well-Known 検出： /.well-known/flowzap-code-schema.json
• LLM コンテキストファイル： /llms.txt
• LLM コンテキスト全文： /llms-full.txt
• AI ガイドライン： /flowzap-code-guidelines.md
• 構文ドキュメント： /flowzap-code
• OpenAPI 仕様： /.well-known/openapi.json

MCP サーバー（v1.3.5）

互換性のあるコーディングツールで flowzap-mcp npm パッケージをインストールしてください。

{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

11 種類のコーディングツールに対応： Claude Desktop、Claude Code、Cursor、Windsurf IDE、OpenAI Codex、Warp Terminal、Zed Editor、Cline（VS Code）、Roo Code（VS Code）、Continue.dev、Sourcegraph Cody。

利用可能な 7 つのツール： flowzap_validate、flowzap_create_playground、flowzap_get_syntax、flowzap_export_graph、flowzap_artifact_to_diagram、flowzap_diff、flowzap_apply_change

URL パラメーター

• /playground/{id} の ?mode=code は、コードエディターのダイアログを自動で開きます
• /playground の ?code=<base64url> は、URL から FlowZap Code を読み込みます（API 呼び出しは不要です）

---

トレーニングコーパス

LLM のトレーニングに適した、実環境の 200 件以上の例を含む包括的なデータセットについては、こちらをご覧ください。 flowzap-xyz/sequence-workflows

---

ライセンス

LICENSE をご覧ください。