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
矩形の領域を表示します。コンテナやグループ化に使用。3D効果にも対応。
box "テキスト" at(x, y) size(幅, 高さ)
box "テキスト" at(x, y) size(幅, 高さ) 3d ※3D効果
box at(x, y) size(幅, 高さ) ※テキスト省略可能

属性

属性説明例
at(x, y)位置座標at(50, 100)
size(w, h)サイズ指定size(200, 100)
3d立体的な3D効果を適用。奥行き感のある表示になりますbox "3D Box" ... 3d
style(...)スタイリング（3D効果使用時は色が自動調整されます）style(background: "#4caf50")
💡 3D効果について

3dキーワードを追加することで、Box要素に立体感を与えることができます。
• 奥行き10pxの立体効果が自動適用されます
• 背景色が設定されている場合、上面・右面の色が自動的に明暗調整されます
• 3D効果はスタイリングと組み合わせて使用できます 

screen "Box Examples" size(400, 200) {
  box "Normal Box" at(50, 50) size(120, 60)
  box "3D Box" at(200, 50) size(120, 60) 3d
  box "Styled Box" at(50, 120) size(120, 60) style(background: "#e3f2fd", border: "2px solid #1976d2")
  box "3D Styled" at(200, 120) size(120, 60) 3d style(background: "#4caf50", color: "white")
}

生成結果:

Normal Box 3D Box Styled Box 3D Styled
rect 図形
基本的な矩形図形。boxよりもシンプルな図形要素。テキスト表示にも対応。
rect "テキスト" at(x, y) size(幅, 高さ)
rect at(x, y) size(幅, 高さ) ※テキスト省略可能
rect at(x, y) size(幅, 高さ) radius(角丸半径)

属性

属性説明例
at(x, y)位置座標at(50, 100)
size(w, h)サイズ指定size(100, 60)
radius(r)角丸半径radius(5)
style(...)スタイリングstyle(fill: "#f0f0f0")
screen "Rectangle Examples" size(350, 180) {
  rect at(50, 40) size(80, 50)
  rect "テキスト付き" at(50, 100) size(120, 50) style(fill: "#e3f2fd")
  rect "角丸" at(200, 40) size(100, 50) radius(10) style(fill: "#ffeb3b")
  rect "カスタム" at(200, 100) size(100, 50) radius(8) style(fill: "#4caf50", color: "white")
}

生成結果:

テキスト付き 角丸 カスタム

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
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
group グループ化
複数の要素をまとめて管理し、相対座標で配置します。要素のグループ化によりレイアウトの構造化が可能です。
group at(x, y) { elements... } 
screen "Group Demo" size(400, 300) {
  // ログインフォームのグループ化
  group at(50, 50) {
    box "Login Form" at(0, 0) size(200, 150)
    text "Username" at(20, 30)
    input "Enter username" at(20, 50) size(160, 30)
    button "Login" at(70, 110) size(80, 25)
  }
  
  // システム構成のグループ化
  group at(280, 80) {
    database "DB" at(0, 0) size(60, 50)
    node "API" at(80, 0) size(70, 50)
  }
}

生成結果:

Login Form Username Enter username Login DB API
✨ Group機能の特徴

• 相対座標: グループ内の要素はグループ位置からの相対座標で配置
• ネスト対応: グループの中にさらにグループを配置可能
• 透明グループ: group at(0,0)は座標変換なしで要素をまとめるだけ
• SVG出力: <g transform="translate(x,y)">タグとして出力

図形・線

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

接続構文一覧
利用可能な接続構文の完全リスト

基本接続

構文説明例
->方向付き接続（右矢印）elementA -> elementB
<-逆方向接続（左矢印）elementA <- elementB
<->双方向接続elementA <-> elementB
--線接続（矢印なし）elementA -- elementB

点線接続

構文説明例
-.>点線矢印接続elementA -.> elementB
<-.点線左矢印接続elementA <-. elementB
<-.>点線双方向接続elementA <-.> elementB
-.-点線接続elementA -.- elementB

曲線接続

構文説明例
~>曲線矢印接続elementA ~> elementB
<~曲線左矢印接続elementA <~ elementB
<~>曲線双方向接続elementA <~> elementB
~.~>点線曲線矢印接続elementA ~.~> elementB
<~.~点線曲線左矢印接続elementA <~.~ elementB
<~.~>点線曲線双方向接続elementA <~.~> elementB
要素定義時: 要素 ... as 名前
接続構文: 名前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
曲線接続
要素間を曲線で接続する機能

曲線接続の例

screen "Curve Connections" size(500, 300) {
  box "起点" at(50, 50) size(80, 60) as start
  box "終点" at(350, 50) size(80, 60) as end
  circle "中継A" at(100, 180) radius(40) as relayA
  circle "中継B" at(300, 180) radius(40) as relayB

  // 曲線接続の例
  start ~> end "曲線矢印"
  relayA <~> relayB "曲線双方向"
  start ~.~> relayA "点線曲線"
  end <~.~ relayB
}

生成結果:

起点終点中継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 →