Getting Started

PlaceFlowは、シンプルなDSL（Domain Specific Language）を使用して、UI/UXレイアウト、システム図、フローチャートを作成できるツールです。コードのようにレイアウトを記述し、美しいSVGとして出力できます。

インストール

VSCode拡張機能（推奨）

Visual Studio Code MarketplaceからPlaceFlow拡張機能をインストールします。

1 VSCodeでMarketplaceを開く
Ctrl+Shift+X (macOS: Cmd+Shift+X)
2 PlaceFlowを検索
検索ボックスに「PlaceFlow」と入力
3 インストール
beardoc製のPlaceFlow拡張機能をインストール

基本構文

画面・レイアウト定義

PlaceFlowではscreenまたはlayoutキーワードでレイアウトを定義します。

screen "画面名" size(幅, 高さ) {
  // 要素を配置
}

// 自動サイズ調整
screen "画面名" size(auto) {
  // 要素の配置に合わせて自動サイズ調整
}

基本的な要素

box（ボックス） - 矩形の領域

box "テキスト" at(x, y) size(幅, 高さ)

button（ボタン） - ボタン要素

button "ボタンテキスト" at(x, y) size(幅, 高さ)

input（入力欄） - テキスト入力欄

input "プレースホルダー" at(x, y) size(幅, 高さ)

構文ルール

⚠️ 重要な制約

✅ 正しい例:

box "Example" at(50, 50) size(100, 50) style(background: "#007bff", color: "white")

❌ 間違った例:

box "Example" at(50, 50) size(100, 50) style(
  background: "#007bff", 
  color: "white"
)

最初の例：ログインフォーム

PlaceFlowで簡単なログインフォームを作成してみましょう。

screen "ログインフォーム" size(400, 300) {
  box "フォーム" at(50, 50) size(300, 200)
  input "ユーザー名" at(80, 100) size(240, 30) as username
  input "パスワード" at(80, 140) size(240, 30) as password
  button "ログイン" at(160, 190) size(80, 30) as loginBtn
}

生成結果:

フォーム ユーザー名 パスワード ログイン
ヒント: asキーワードを使用して要素に名前を付けると、後で参照や接続に使用できます。

要素間の接続

asキーワードで名前を付けた要素同士は、直接接続することができます。

screen "データフロー" size(400, 150) {
  database "データベース" at(50, 60) size(100, 30) as db
  box "API" at(200, 60) size(80, 30) as api
  box "フロント" at(320, 60) size(60, 30) as frontend
  
  db -> api
  api -> frontend
}

生成結果:

データベース API フロント

接続の種類

a -> b - aからbへの方向付き接続（矢印）

a <-> b - aとb間の双方向接続（両端矢印）

VSCodeでの使い方

1 新しいファイルを作成
.pf または .placeflow 拡張子でファイルを保存
2 PlaceFlow DSLを記述
上記の例をコピーしてファイルに貼り付け
3 プレビューを表示
エディタ右上の「Open Preview」アイコンをクリック、またはコマンドパレット（Ctrl+Shift+P）で「PlaceFlow: Open Preview」を実行
4 SVGをエクスポート
「Copy SVG Code」でクリップボードにコピー、または「Export to SVG」でファイル保存

次のステップ

基本的な使い方を習得したら、以下のページで更に詳しく学習できます：

← ホームに戻る DSL Reference →