DSL Reference

PlaceFlow DSLの完全なリファレンスガイドです。全ての要素、属性、構文、スタイリング機能について詳しく説明します。

基本構文

画面・レイアウト定義

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

screen "画面名" size(幅, 高さ) { ... }
screen size(幅, 高さ) { ... } ※テキスト省略可能
layout "レイアウト名" size(幅, 高さ) { ... }
layout size(幅, 高さ) { ... } ※テキスト省略可能

テキスト省略例

screen size(600, 400) {
  // 画面名を省略した場合
  box "コンテンツ" at(50, 50) size(200, 100)
}

layout size(800, 600) {
  // レイアウト名を省略した場合
  button "ボタン" at(100, 100) size(100, 40)
}

自動サイズ調整

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

コメント

// 行コメント

構文ルール

⚠️ 重要な制約

  • 1要素1行: 各要素定義は必ず1行で記述してください
  • スタイル定義: style()内も複数行に分けることはできません
  • 改行禁止: 要素定義の途中で改行するとパースエラーになります

✅ 正しい例:

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"
)

要素の命名

asキーワードで要素に名前を付けて、後で参照できます。

button "ログイン" at(50, 100) size(100, 40) as loginBtn

レイアウト要素

box UI
矩形の領域を表示します。コンテナやグループ化に使用。
box "テキスト" at(x, y) size(幅, 高さ)
box at(x, y) size(幅, 高さ) ※テキスト省略可能

属性

属性説明例
at(x, y)位置座標at(50, 100)
size(w, h)サイズ指定size(200, 100)
style(...)スタイリングstyle(background: "#f0f0f0")
screen "Box Example" size(300, 200) {
  box "Hello Box" at(50, 50) size(120, 60)
  box "Styled Box" at(50, 120) size(120, 60) style(background: "#e3f2fd", border: "2px solid #1976d2")
}

生成結果:

Hello Box Styled Box
rect 図形
基本的な矩形図形。boxよりもシンプルな図形要素。
rect "テキスト" at(x, y) size(幅, 高さ)
rect at(x, y) size(幅, 高さ) ※テキスト省略可能
rect at(x, y) size(幅, 高さ) radius(角丸半径) 
screen "Rectangle Examples" size(300, 150) {
  rect at(50, 40) size(80, 50)
  rect at(160, 40) size(80, 50) radius(10) style(fill: "#ffeb3b")
}

生成結果:

UI要素

button UI
ボタン要素を配置します。
button "ボタンテキスト" at(x, y) size(幅, 高さ)
button at(x, y) size(幅, 高さ) ※テキスト省略可能 
screen "Button Examples" size(300, 150) {
  button "Click Me" at(50, 50) size(100, 40)
  button "Styled Button" at(50, 100) size(120, 40) style(background: "#4CAF50", color: "white")
}

生成結果:

Click Me Styled Button
input UI
テキスト入力フィールドを配置します。
input "プレースホルダー" at(x, y) size(幅, 高さ)
input "プレースホルダー" at(x, y) size(幅, 高さ) type="password" 
screen "Input Examples" size(300, 120) {
  input "Enter your name" at(50, 30) size(200, 30)
  input "Email address" at(50, 70) size(200, 30) style(border: "2px solid #2196F3")
}

生成結果:

Enter your name Email address
label UI
テキストラベルを配置します。
label "テキスト" at(x, y)
label at(x, y) ※テキスト省略可能 
screen "Label Examples" size(300, 150) {
  label "ユーザー名:" at(50, 40)
  label "重要:" at(50, 80) style(color: "#dc3545", fontWeight: "bold")
  label "説明文" at(50, 120) style(fontSize: "12", color: "#6c757d")
}

生成結果:

ユーザー名: 重要: 説明文
text テキスト
独立したテキスト要素を配置します。
text "テキスト内容" at(x, y)
text "テキスト内容" at(x, y) fontSize(サイズ) 
screen "Text Examples" size(400, 200) {
  text "タイトル" at(50, 40) style(fontSize: 24, fontWeight: "bold")
  text "サブタイトル" at(50, 80) style(fontSize: 16, color: "#666")
  text "本文テキスト" at(50, 120) style(fontSize: 14)
  text "中央寄せ" at(200, 160) style(textAlign: "center", fontSize: 14)
}

生成結果:

タイトル サブタイトル 本文テキスト 中央寄せ

図表要素

circle 図形
円形の要素を配置します。
circle "テキスト" at(x, y) radius(半径)
circle at(x, y) radius(半径) 
screen "Circle Examples" size(300, 150) {
  circle "1" at(80, 75) radius(30)
  circle "API" at(220, 75) radius(35) style(fill: "#2196F3", color: "white")
}

生成結果:

1 API
database システム
円柱形状のデータベースアイコンを配置します。
database "データベース名" at(x, y) size(幅, 高さ)
database at(x, y) size(幅, 高さ) ※テキスト省略可能 
screen "Database Examples" size(400, 200) {
  database "MySQL" at(50, 60) size(100, 80)
  database "Redis" at(200, 60) size(100, 80) style(fill: "#dc3545")
}

生成結果:

MySQL Redis
node システム
システムノードやサーバーを表します。
node "ノード名" at(x, y) size(幅, 高さ)
node at(x, y) size(幅, 高さ) ※テキスト省略可能 
screen "Infrastructure" size(500, 300) {
  node "Web Server" at(50, 50) size(120, 80) as web
  node "App Server" at(200, 50) size(120, 80) as app
  node "Cache Server" at(350, 50) size(120, 80) as cache
}

生成結果:

Web Server App Server Cache Server
person アクター
人物・ユーザー・アクターを表します。
person "人物名" at(x, y) size(幅, 高さ)
person at(x, y) size(幅, 高さ) ※テキスト省略可能 
screen "Person Examples" size(400, 200) {
  person "ユーザー" at(50, 60) size(80, 100)
  person "管理者" at(200, 60) size(80, 100) style(fill: "#28a745")
}

生成結果:

ユーザー 管理者
loadbalancer システム
ロードバランサーを表します。
loadbalancer "名前" at(x, y) size(幅, 高さ)
loadbalancer at(x, y) size(幅, 高さ) ※テキスト省略可能 
screen "Load Balancing" size(500, 250) {
  loadbalancer "ALB" at(200, 50) size(100, 60) as alb
  node "Server 1" at(100, 150) size(80, 60) as srv1
  node "Server 2" at(300, 150) size(80, 60) as srv2
}

生成結果:

ALB Server 1 Server 2

図形・線

line 図形
指定した2点間に直線を描画します。
line from(x1, y1) to(x2, y2) 
screen "Line Examples" size(300, 200) {
  box "A" at(50, 50) size(60, 40)
  box "B" at(190, 120) size(60, 40)
  line from(110, 70) to(190, 140)
  line from(50, 120) to(250, 50) style(stroke: "#dc3545", strokeWidth: "3")
}

生成結果:

A B
arrow 図形
指定した2点間に矢印を描画します。
arrow from(x1, y1) to(x2, y2)
arrow from(x1, y1) to(x2, y2) size(矢印サイズ) 
screen "Arrow Examples" size(400, 150) {
  box "開始" at(50, 50) size(80, 50)
  box "終了" at(270, 50) size(80, 50)
  arrow from(130, 75) to(270, 75)
  arrow from(200, 120) to(130, 100) style(stroke: "#28a745")
}

生成結果:

開始 終了

要素間接続

PlaceFlowでは要素に名前を付けて直接接続することができます。要素間の接続点は自動的に計算され、直感的なコードが書けます。

要素間接続
要素に名前を付けて直接接続する直感的な方法
要素定義時: 要素 ... as 名前
接続構文: 名前1 -> 名前2 (方向付き)
接続構文: 名前1 <-> 名前2 (双方向)

名前ベース方向付き接続

screen "Name-based Connection" size(400, 150) {
  database "DB" at(50, 40) size(80, 70) as db
  box "API" at(200, 40) size(80, 70) as api
  circle "UI" at(320, 50) radius(30) as ui
  db -> api
  api -> ui
}

生成結果:

DB API UI

双方向接続

screen "Bidirectional Connection" size(400, 150) {
  circle "サーバーA" at(80, 75) radius(40) as serverA
  circle "サーバーB" at(320, 75) radius(40) as serverB
  serverA <-> serverB
}

生成結果:

サーバーA サーバーB

スタイリング

style()関数を使用して、要素の外観をカスタマイズできます。

共通スタイルプロパティ

プロパティ説明例
background背景色background: "#f0f0f0"
color文字色color: "#333"
border境界線border: "2px solid #007bff"
fontSizeフォントサイズfontSize: 16
fontWeightフォント太さfontWeight: "bold"
textAlignテキスト配置textAlign: "center"

図形要素のスタイル

プロパティ説明例
fill塗りつぶし色fill: "#ff5722"
stroke線の色stroke: "#333"
strokeWidth線の太さstrokeWidth: 2
screen "Styled Elements" size(400, 200) {
  box "Primary Box" at(50, 50) size(150, 60) style(background: "#007bff", color: "white", border: "2px solid #0056b3")
  circle "Alert" at(300, 80) radius(35) style(fill: "#dc3545", color: "white", fontWeight: "bold")
}

生成結果:

Primary Box Alert
スタイル指定はCSS準拠で、複数のプロパティをカンマで区切って指定できます。

高度な機能

ネストしたレイアウト

要素の中に他の要素を配置できます。

screen "Nested Layout" size(400, 300) {
  box "メインコンテナ" at(50, 50) size(300, 200) {
    box "ヘッダー" at(20, 20) size(260, 50) style(background: "#f8f9fa")
    box "サイドバー" at(20, 80) size(80, 100) style(background: "#e9ecef")
    box "コンテンツ" at(110, 80) size(170, 100) style(background: "#ffffff")
  }
}

生成結果:

メインコンテナ ヘッダー サイドバー コンテンツ

要素の参照と接続

asで名前を付けた要素は、後で参照できます。

screen "System Diagram" size(500, 300) {
  person "User" at(50, 120) size(80, 60) as user
  node "Web App" at(200, 120) size(100, 60) as webapp
  database "Database" at(370, 120) size(80, 60) as db
  
  user -> webapp
  webapp -> db
}

生成結果:

User Web App Database
← Getting Started Examples →