PlaceFlow - テキストで描く、レイアウト設計ツール

PlaceFlowは、シンプルなDSL（Domain Specific Language）でレイアウト設計を効率化するVS Codeの拡張機能です。
PlaceFlow-vscode
DSLからsvgを生成します。
詳細についてはマニュアルを参照ください。

PlaceFlowマニュアル

🎯 こんな課題を解決します

• 「ワイヤーフレーム作成に時間がかかりすぎる」
• 「コードと同じように、テキストで図を管理したい」
• 「plantumlの配置図で要素が多くなると、レイアウトの制御が困難」

✨ 特徴

シンプルなDSL記法

screen "企業ログインシステム" size(400, 500) {
  // ヘッダー部分
  box " " at(0, 0) size(400, 80) style(background: "#1e3a8a", color: "white")
  text "Company Portal" at(200, 40) style(fontSize: 24, color: "white", textAlign: "center")
  
  // メインフォームエリア
  box "ログインフォーム" at(50, 120) size(300, 280) style(background: "#f8fafc", border: "1px solid #e2e8f0")
  
  // ユーザー名フィールド
  text "ユーザー名" at(70, 150) style(fontSize: 14, color: "#374151", textAlign: "left")
  input "社員番号またはメールアドレス" at(70, 170) size(260, 40) style(background: "white", border: "2px solid #d1d5db") as username
  
  // パスワードフィールド
  text "パスワード" at(70, 230) style(fontSize: 14, color: "#374151", textAlign: "left")
  input "パスワードを入力" at(70, 250) size(260, 40) style(background: "white", border: "2px solid #d1d5db") as password
  
  // ボタン
  button "ログイン" at(70, 320) size(120, 45) style(background: "#059669", color: "white") as loginBtn
  button "キャンセル" at(210, 320) size(120, 45) style(background: "#6b7280", color: "white") as cancelBtn
  
  // フッター
  text "© 2025 Company Name" at(200, 450) style(fontSize: 12, color: "#9ca3af", textAlign: "center")
}

リアルタイムプレビュー

テキストを入力すると、即座にSVG図表が生成されます。

GitHub向けの対応

• GitHubではセキュリティ上の理由で、マークダウン内のインラインSVGが表示されません
• PlaceFlowからSVGファイルを出力し、リポジトリにアップロード
• README.mdで 等のマークダウンで![説明](./assets/layout.svg) のように参照する
• SVGファイルもテキストベースのため、バージョン管理で変更履歴を追跡可能

🚀 主な用途

• 画面設計: UIワイヤーフレーム、モバイルアプリ設計
• システム構成図: サーバー配置、インフラ図
• 組織図・フロー図: 業務フロー、チーム構成
• 空間レイアウト: オフィス配置、間取り図

💡 使い方

1. DSLコード入力: 左ペインにレイアウトを記述
2. リアルタイム確認: 右ペインで即座にプレビュー
3. 出力・共有: SVGダウンロードまたはコードコピー

🎨 スタイル対応

box "重要な通知" at(50, 50) size(300, 80) 
    style(fill:#ef4444, color:white, radius:8)

色、サイズ、角丸など、豊富なスタイリングオプションを提供。

---

PlaceFlow - コードを書くように、図を描こう。