PlaceFlow VSCode Extension

Create beautiful layout diagrams and system architecture diagrams using simple DSL (Domain Specific Language).

✨ Features

🎨 Syntax Highlighting - Rich syntax highlighting for .pf and .placeflow files
👀 Real-time Preview - Live SVG preview with auto-refresh
📤 Multiple Export Options - Export to SVG files and copy SVG code to clipboard
⌨️ Keyboard Shortcuts - Quick access with customizable key bindings
🚀 Fast & Lightweight - Built with performance in mind

📚 Complete Manual & Samples

For detailed usage guides, comprehensive samples, and tutorials, visit our official manual site:

📖 PlaceFlow Complete Manual

Detailed explanations of all 22 element types
Practical tutorials and examples
Best practices guide
Comprehensive troubleshooting guide

🚀 Quick Start

Installation

Open VSCode
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "PlaceFlow"
Click Install

🧪 Development & Testing

Local Testing

For VSCode extension development, integration tests must be run locally due to Electron environment requirements:

# Run all tests including VSCode integration tests (local only)
npm test

# Run CI-safe tests (skips VSCode integration tests)
npm run test:ci

Note: VSCode integration tests are automatically skipped in GitHub Actions CI due to Electron display requirements. All core functionality is covered by unit tests that run in CI.

Basic Usage

Create a new file with .pf or .placeflow extension
Write your layout using PlaceFlow DSL
Use Ctrl+Shift+P (Cmd+Shift+P) → "PlaceFlow: Open Preview" to see live preview
Export your diagram using the toolbar buttons

📝 DSL Syntax

Basic Screen Layout

screen "My Layout" size(800, 600) {
  box "Header" at(50, 50) size(700, 80) style(background: "#1976d2", color: "white")
  button "Click Me" at(100, 200) size(120, 40)
  input "Enter text" at(250, 200) size(200, 40)
}

System Architecture

screen "Architecture" size(600, 400) {
  database "MySQL" at(100, 100) size(100, 60)
  node "API Server" at(300, 100) size(120, 60)  
  loadbalancer "Load Balancer" at(500, 100) size(100, 60)
  
  database -> node "queries"
  node -> loadbalancer "requests"
}

Nested Elements

screen "Dashboard" size(800, 600) {
  box "Main Panel" at(50, 50) size(700, 500) {
    box "Sidebar" at(20, 20) size(200, 460)
    box "Content" at(240, 20) size(440, 460) {
      text "Welcome!" at(220, 50) style(fontSize: 24)
      button "Get Started" at(180, 100) size(120, 40)
    }
  }
}

🎮 Available Commands

Command	Shortcut	Description
PlaceFlow: Open Preview	`Ctrl+Shift+P`	Open live SVG preview
PlaceFlow: Copy SVG Code	-	Copy SVG code to clipboard
PlaceFlow: Export to SVG	-	Export diagram as SVG file

📋 Available Elements

UI Elements

box - Container boxes
button - Interactive buttons
input - Input fields
text - Text labels
circle - Circular elements
rect - Rectangle shapes

System Elements

database - Database icons (cylinder shape)
node - Server/service nodes
person - User/stakeholder icons
loadbalancer - Load balancer icons (hexagon)

Connections

-> - Directional arrows
<-> - Bidirectional arrows
-- - Simple lines

🎨 Styling

Apply styles using the style() function:

box "Styled Box" at(100, 100) size(200, 100) style(
  background: "#f0f0f0",
  border: "2px solid #333",
  fontSize: 16,
  fontWeight: "bold"
)

Style Properties

background / backgroundColor - Background color
color - Text color
border / stroke - Border color and width
fontSize - Text size
fontWeight - Text weight (normal, bold)
textAlign - Text alignment (left, center, right)

📁 File Extensions

PlaceFlow recognizes these file extensions:

.pf - PlaceFlow diagram files
.placeflow - Alternative extension

⚙️ Configuration

Workspace Settings

Add to your VSCode settings.json:

{
  "files.associations": {
    "*.pf": "placeflow",
    "*.placeflow": "placeflow"
  }
}

🐛 Troubleshooting

Preview Not Working

Ensure file is saved with .pf or .placeflow extension
Check for syntax errors in your DSL code
Try reloading the window (Ctrl+Shift+P → "Developer: Reload Window")

Syntax Highlighting Issues

Verify file extension is recognized
Check VSCode language mode (bottom-right corner)

📝 Feedback & Feature Requests

We appreciate your feedback to improve PlaceFlow!

📋 Feedback Form: PlaceFlow Report Form

Note: While we value all feedback, responses are provided on a best-effort basis. Source code is proprietary and not publicly available at this time.

📄 License

This extension is licensed under the MIT License.

🔗 Links

VSCode Marketplace

💰 Pricing

Currently FREE - All features are available at no cost.

⚠️ Important Notice: While PlaceFlow is currently free to use, we may introduce premium features or paid tiers in the future to support ongoing development and maintenance.

⭐ Support

If you find PlaceFlow useful, please consider:

📝 Writing a review on the VSCode Marketplace
💬 Sharing with your colleagues

Happy diagramming with PlaceFlow! 🎨✨

PlaceFlow VSCode 拡張機能（日本語）

シンプルなDSL（ドメイン固有言語）を使って美しいレイアウト図やシステムアーキテクチャ図を作成できます。

✨ 機能

🎨 シンタックスハイライト - .pfと.placeflowファイルの豊富な構文ハイライト
👀 リアルタイムプレビュー - 自動更新機能付きライブSVGプレビュー
📤 複数エクスポート機能 - SVGファイルエクスポートとSVGコードコピー
⌨️ キーボードショートカット - カスタマイズ可能なキーバインドでクイックアクセス
🚀 高速・軽量 - パフォーマンスを重視した設計

📚 完全マニュアル・サンプル集

詳細な使い方、豊富なサンプル、チュートリアルは公式マニュアルサイトをご覧ください：

📖 PlaceFlow 完全マニュアル

全22種類の要素詳細説明
実践的なチュートリアル
ベストプラクティス集
トラブルシューティングガイド

🚀 クイックスタート

インストール

VSCodeを開く
拡張機能パネルを開く (Ctrl+Shift+X / Cmd+Shift+X)
"PlaceFlow"で検索
インストールをクリック

基本的な使い方

.pfまたは.placeflow拡張子でファイルを作成
PlaceFlow DSLを使ってレイアウトを記述
Ctrl+Shift+P (Cmd+Shift+P) → "PlaceFlow: Open Preview" でライブプレビューを表示
ツールバーのボタンから図をエクスポート

📝 DSL構文

基本的な画面レイアウト

screen "マイレイアウト" size(800, 600) {
  box "ヘッダー" at(50, 50) size(700, 80) style(background: "#1976d2", color: "white")
  button "クリックしてください" at(100, 200) size(120, 40)
  input "テキストを入力" at(250, 200) size(200, 40)
}

システムアーキテクチャ

screen "アーキテクチャ" size(600, 400) {
  database "MySQL" at(100, 100) size(100, 60)
  node "APIサーバー" at(300, 100) size(120, 60)  
  loadbalancer "ロードバランサー" at(500, 100) size(100, 60)
  
  database -> node "クエリ"
  node -> loadbalancer "リクエスト"
}

ネストした要素

screen "ダッシュボード" size(800, 600) {
  box "メインパネル" at(50, 50) size(700, 500) {
    box "サイドバー" at(20, 20) size(200, 460)
    box "コンテンツ" at(240, 20) size(440, 460) {
      text "ようこそ！" at(220, 50) style(fontSize: 24)
      button "開始する" at(180, 100) size(120, 40)
    }
  }
}

🎮 利用可能なコマンド

コマンド	ショートカット	説明
PlaceFlow: Open Preview	`Ctrl+Shift+P`	ライブSVGプレビューを開く
PlaceFlow: Copy SVG Code	-	SVGコードをクリップボードにコピー
PlaceFlow: Export to SVG	-	図をSVGファイルとしてエクスポート

📋 利用可能な要素

UI要素

box - コンテナボックス
button - インタラクティブボタン
input - 入力フィールド
text - テキストラベル
circle - 円形要素
rect - 長方形

システム要素

database - データベースアイコン（シリンダー形状）
node - サーバー・サービスノード
person - ユーザー・ステークホルダーアイコン
loadbalancer - ロードバランサーアイコン（六角形）

接続

-> - 方向性のある矢印
<-> - 双方向矢印
-- - シンプルな線

🎨 スタイリング

style()関数を使用してスタイルを適用：

box "スタイル付きボックス" at(100, 100) size(200, 100) style(
  background: "#f0f0f0",
  border: "2px solid #333",
  fontSize: 16,
  fontWeight: "bold"
)

スタイルプロパティ

background / backgroundColor - 背景色
color - テキスト色
border / stroke - ボーダーの色と幅
fontSize - テキストサイズ
fontWeight - テキストの太さ (normal, bold)
textAlign - テキスト配置 (left, center, right)

📁 ファイル拡張子

PlaceFlowは以下のファイル拡張子を認識します：

.pf - PlaceFlow図ファイル
.placeflow - 代替拡張子

🐛 トラブルシューティング

プレビューが動作しない場合

ファイルが.pfまたは.placeflow拡張子で保存されていることを確認
DSLコードに構文エラーがないかチェック
ウィンドウの再読み込みを試す (Ctrl+Shift+P → "Developer: Reload Window")

シンタックスハイライトの問題

ファイル拡張子が認識されているか確認
VSCodeの言語モード（右下角）をチェック

📝 フィードバック・機能要望

PlaceFlow改善のためのご意見をお聞かせください！

📋 フィードバックフォーム: フィードバックを送る

注意: すべてのフィードバックを大切にしていますが、返信はベストエフォートベースで行われます。ソースコードは現在プロプライエタリであり、一般公開されていません。

📄 ライセンス

この拡張機能はMITライセンスの下でライセンスされています。

🔗 リンク

VSCode Marketplace

💰 料金について

現在無料 - すべての機能を無償でご利用いただけます。

⚠️ 重要なお知らせ: PlaceFlowは現在無料でご利用いただけますが、継続的な開発とメンテナンスをサポートするため、将来的にプレミアム機能や有料プランを導入する可能性があります。

⭐ サポート

PlaceFlowが役に立った場合は、ぜひ：

📝 VSCode Marketplaceでレビューを書く
💬 同僚と共有する

PlaceFlowで素敵な図作成を！🎨✨

PlaceFlow

beardoc