ZigZag：Rust で構築された視覚的刺繍エディタの紹介

ZigZag は、動作速度を最優先に設計された Rust ベースの刺繍エディタです。内蔵の MCP（モデルコンテキストプロトコル）に対応しており、AI エージェントがデザイン作成や編集を支援します。SVG アートをスチッチに変換・微調整し、PES、DST、EXP、JEF、VP3 形式で多数の機械へ出力するか、Bluetooth で Brother Skitch (PP1) に直接送信可能です。

Illustrator やコマンドラインツールとの連携も充実しており、エディタ内外でも同一のワークフローを維持できます。

実働デモ

zigzag-demo.mp4 をご参照ください。

Brother Skitch (PP1) への刺繍作業

• ビデオ（MP4、1080p）ダウンロード可能
• X（旧 Twitter）での元の投稿はこちら

ダウンロード方法

Mac 向け

• 要件: macOS 11 以降（Apple Silicon および Intel）、Rust のインストール不要。
• 手順:

  ZigZag.dmg

  をダウンロードし、アプリケーションフォルダへドラッグ＆ドロップしてください。
• セキュリティ: Apple による署名および notarize 済みのため警告なしで実行可能です。

Windows 向け

• 要件: 64 ビット Windows 10（バージョン 1709 以降）、Windows 11。
• ダウンロード:

  ZigZag-<version>-x86_64-windows.zip

  を取得します。
• 手順: zip 解凍後、

  ZigZag.exe

  をダブルクリックで起動。
  • 注意: 初回実行時、Windows SmartScreen から警告が出ます。「詳細情報」→「引き続き実行する」を選択してください。

プロジェクト構成 (zigzag/)

ソースコードの主なモジュールと機能です：

• src/svg.rs

  : SVG インポート（usvg ライブラリ利用）
  • 塗りつぶし、ストローク、変換、テキストに対応

• src/document/

  : 編集可能なドキュメント管理
  • SVG ID に設定を記録、レイアウト・タイポグラフィ変更は SVG 変換として保存

• src/params.rs

  : スチッチ設定トークンと生地プリセット

• src/stitch/fill.rs

  : タタミ塗り（スキャンライン区画、階段状の行）

• src/stitch/satin.rs

  : サテンカラム機能
  • 2 つのレール間、自動サテン、下地縫い、短いステッチ対応

• src/stitch/stroke.rs

  : 走査ステッチ／トリプルランステッチ

• src/boolean.rs

  : ポリゴンブール演算とオフセット（i_overlay）

• src/design.rs

  : プランナー機能
  • オーバーラップ除去、キャップ順序、経路計画、トリム処理

• src/checks.rs

  : デジタル化チェック
  • サイズ、幅、タイポグラフィ、ホープ適合性確認

• src/formats/

  : 形式変換モジュール
  • PES, DST, EXP, JEF, VP3, Skitch PEN ワイター対応
  • リーダー、プレビュー、ワークシート出力

• src/machine/

  : Skitch ブルートゥースプロトコル（+ btleplug クライアント）

• src/studio/

  : エディタ環境
  • OpenGL を経由した egui ベースの UI＋MCP サーバー（

    gui

    機能）

• src/mcp_bridge.rs

  : MCP クライアント用 stdio ↔ HTTP ブリッジ

ビルド方法

• CLI 構築:

  cargo build --release
  

• スタジオエディタ＋Skitch アップロード機能構築:

  cargo build --release --features gui,ble
  

• 依存関係: Linux GUI 起動には X11/Wayland および OpenGL 開発ライブラリが必要です。

  libdbus

  はバンドル済み。

スチッチの種類と機能

自動最適化機能

• 自動分割: 7mm より広いサテンは自動的に短く階段状に分割され、カラム幅に応じて間隔が最適化されます。
• プランナー機能:
  • オーバーラップ除去: 後方のオブジェクト下に隠れた部分は縫わない（0.5mm の重なりを維持）。
  • キャップ順序: 中心から外向き、下から上向きの順で処理。色グループ化とレイヤー順序を尊重。
  • 経路計画: 移動ステッチは形状内を維持。直線が収まらない場合は輪郭の内側を回る（Ink/Stitch のアンダーパス）。くり抜きを含む塗りつぶしはカット回数を極小化します。トリムは両方法で失敗時のみ実行（移動最大 50mm）。
  • 縫製制御: 起点・終点（糸の出入り）、その後のトリム、停止位置を詳細指定。オブジェクト間のギャップを Nmm まで接続可能。
• 生地プリセット: 標準、薄いコットンキャップ、構造体キャップ、ニットなど対応。
• チェック: 細い塗りつぶし、幅違いのサテン、微小文字、微細ギャップ、完全被覆オブジェクト、ホープ適合性の検出。
• 色グループ化: レイヤー順序を崩さずに糸変更回数を削減する再配置を行います。

Mac アプリ構築詳細（開発者向け）

Rust および Xcode CLI (

xcode-select --install

• アプリ構築とコピー:

  packaging/macos/make-app.sh --install
  # ZigZag.app が /Applications にコピーされる
  

• DMG 作成 (共有用):

  packaging/macos/make-app.sh --dmg
  # dist/ZigZag-<version>.dmg が作成される
  

• ユニバーサルビルド (Apple Silicon & Intel):

  packaging/macos/make-app.sh --universal
  

• 公開用 DMG (署名済み・認証済み):

  packaging/macos/make-app.sh --release
  # ユニバーサル、署名済み、notarized。警告なしで動作します。
  

開発者 ID と認証設定

--release

1. 開発者 ID 追加: Xcode › 設定 › アカウント › シリアル番号管理 › ＋
2. アカウント固有のパスワード作成:

   account.apple.com

3. キーチェーン保存:

   xcrun notarytool store-credentials zigzag-notary --apple-id YOUR_APPLE_ID --team-id YOUR_TEAM_ID
   

コマンドライン使用と MCP 設定

アプリをバンドルした環境から CLI を直接使用する場合：

ln -s /Applications/ZigZag.app/Contents/MacOS/zigzag /usr/local/bin/zigzag

Claude Desktop などの AI エージェントに接続させる場合、MCP 設定を以下のパスに指し示してください：

/Applications/ZigZag.app/Contents/MacOS/zigzag-mcp

注意:

--release

スタジオアイコン

• 画像パス:

  packaging/macos/AppIcon.png

  (明るい) および

  packaging/macos/AppIcon-dark.png

  (ダーク)
• ビルド: マルチ解像度.icns ファイルを自動再生成。個別生成は

  bash packaging/macos/make-icons.sh

  で可能。
• 動作: Finder と未起動アプリは明るいアイコンを表示。スタジオ起動中は明暗テーマ（

  ZIGZAG_THEME=light|dark

  ）に追従します。

スタジオコマンドライン使用法

zigzag-studio [design.svg|logo.png] [--mcp-port 7878 |--no-mcp |--mcp-stdio]

Illustrator や VectorCraft に似た機能を備えたスタジオ環境です：

基本操作とツールバー

• 選択・編集:

  • V

    : 選択、

    A

    : 直接選択、

    H

    : ハンド、

    P

    : ペン。
  • クリックで角作成、ドラッグで曲線。Option はハンドル破断、Shift は 45 度固定、Space はポイント移動。
  • ペンの詳細: 描画中 Option はアンカーポイントツール、⌘は直接選択（続きを描く）。右クリックでグループ操作、Option-クリックでステップ通る。
• ブラシ (B):
  • VectorCraft パスクリーンアップツールの集大成。スムージング（ノイズ除去）、パス消去器（削除）、結合（2 つの端を接続）。
• シェイプ: 矩形 (M)、楕円 (L)、ポリゴン、星、ライン (

  \

  )。ホールドまたは右クリックで多角形/星作成。数値入力も可能。

パスツール

• パスファインダー: 統合、前面除去、共通部分、除外。2 つ以上のオブジェクト選択時に変換パネルにもボタン表示。
• パス編集: オフセット、ストローク輪郭、簡素化（VectorCraft スライダー）、角丸め、クリーンアップ。
  • Clean_up: 余分なポイント除去、刺繍不可微小オブジェクト検出、直線上の中点修正。最小二乗曲線適合で滑らかな曲線を保証。

画像追跡とロゴ処理

• 対応形式: PNG, JPEG, WebP, GIF, BMP, TIFF を開き、ドロップ・配置すると

  Trace Image

  ウィンドウで自動追跡。
• 機能: フラットカラーシェイプ化、帽子色でのプレビュー、糸チャートへの色の_snap（Brother/Janome など）。
• CLI 変換:

  zigzag convert logo.png -o logo.pes
  

コンテキストタスクバー

• 選択の下に表示される操作候補：スチッチ種類、糸色、ポイント編集、角丸め、簡素化など。

• 表示 › 文脈タスクバー

  で非表示に可能。

エージェント（MCP）連携

• 起動: 左ドック全高のエージェントパネル。Sparkle クリックで開閉（⌘K も可）。
• 機能: 背景で Claude Code または Codex を実行し、スタジオの MCP サーバーに接続。デザイン構築を監視。シェル・ファイル編集なし。
• 表示: トランスクリプトに発言とステップ名。処理中オブジェクトには動く輪郭や輝きを表示。

スレッドパネルとスチッチ設定

• スチッチ順序: 各カラーブロック番号付き、ステッチ数、同じ糸の再走査位置を表示。「By Color」モードでは全域変更可能。
• パレット管理: Brother/Janome および自作パレットの切り替え。

  Match All

  で箱内の糸に合わせてデザインを保持。

ドキュメントとタブ管理

• タブ機能: ドキュメントごとに 1 つのタブ。VectorCraft や Illustrator と同様の履歴、選択、ズーム、ステッチ状態を独立保持。
• 操作: ⌃Tab / ⌃⇧Tab でステップ通る、ドラッグで順序変更。×や⌘W で閉じる（未保存変化の確認あり）。
• 回復機能: アプリ終了時でも

  session.json

  と各タブの回復ファイルにより、未保存・ズーム・選択状態が保持されます。

パネルとレイアウト

• 配置: 左ドックにエージェントを固定。右側にオブジェクト、スチッチ、変形、タイポグラフィ、スレッド、ドキュメント配置。
• 柔軟性: ドッキング・フロート（キャンバス上にドロップ）、タブ共有・分離が可能。ヘッダードラッグで順序変更。
• テーマ: システム明暗テーマに追従 (

  ZIGZAG_THEME=light|dark

  )。San Francisco フォント使用。

高度な編集機能

• オブジェクトごとの設定: 大きなボタンやタスクバー、右クリック（F/S/R/C/X）でスチッチ種類を選択。プレビューはライブ再計画。
• グループ操作: Illustrator 同様のドラッグ選択、ダブルクリックでの内部進入。⌘-クリックで内側選択可能。
• タイポグラフィ: VectorCraft 風。直接入力（Enter で改行）、フォント検索、トラッキング、ペアキーニング、ケース変更など。パス上タイポグラフィも対応。
• 経路計画と移動:
  • 編集時のスチッチ更新はバックグラウンドで実行（12ms を超えるとステータスバー表示）。
  • GPU で描画するため、CPU はパン・ズーム・ドラッグに関わらず負荷なし。千〜半百万ステッチも滑らか。
• 測定: 測定器 (I) で 2 点間の距離・アングルを表示。端点はポイントやグリッドにスナップ。

メニューとショートカット

• 通常メニュー: ファイル、編集、オブジェクト、表示、ウィンドウの標準⌘ショートカット。
• ツールカーソル: ペン先、クロスヘア、空心矢印など直感的なカーソル表示。
• 右クリックメニュー: スチッチ種類選択とそのアイコン、通常コマンド集約。

出力と保存

• 形式: Ctrl/⌘S で設定を SVG に書き込み。PES, DST, EXP, JEF, VP3, PEC, PEN または HTML ワークシート出力。
• Skitch 送信: Bluetooth を介して Brother Skitch (PP1) へ直接送信用。

エージェント（MCP）詳細

スタジオは

http://127.0.0.1:7878/mcp

クライアント接続設定

Claude Code:

claude mcp add --transport http zigzag http://127.0.0.1:7878/mcp

Claude Desktop (stdio):

claude_desktop_config.json

{ "mcpServers": { "zigzag": { "command": "/path/to/zigzag-mcp", "args": ["--headless"] } } }

• --headless

  : アプリ未起動でも動作。保存・エクスポートまでのみ保持。

利用可能なツール (ツールの概要)

• デザイン操作:

  get_design

  ,

  add_svg

  ,

  set_object

  ,

  delete_object

  ,

  move_object

• 変形:

  transform_objects

  ,

  duplicate_objects

• テキスト:

  add_text

  ,

  edit_text

  ,

  list_fonts

• ドキュメント設定:

  set_document

  ,

  group_colors

  ,

  render_preview

  ,

  check_design

• ファイル操作:

  open_file

  ,

  list_documents

  ,

  switch_document

  ,

  new_document

  ,

  save

  ,

  export

• 追跡・修正:

  trace_image

  ,

  round_corners

  ,

  simplify

  ,

  clean_up

試み例

「薄めコットンキャップ用の 50mm 丸バッジに山と太陽を描いてください、チェックしプレビューを表示してください」と入力することで、エージェントが自動生成します。

バッチ処理: 複数呼び出しを 1 つのステップへ統合。

$0.added.0.name

CLI コマンド一覧

• 変換・追跡:

  zigzag convert logo.svg -o logo.pes -o logo.jef -o preview.png -o sheet.html [--fabric thin-cap] [--hat]
  zigzag convert old.dst -o old.pes       # 機械ファイルも変換可能
  zigzag convert logo.png -o logo.pes     # PNG/JPEG を追跡して変換
  

• 情報:

  zigzag info logo.svg             # 統計＋チェック
  zigzag fabrics                   # プリセット一覧
  zigzag skitch info --status      # Skitch ステータス（--features ble 必須）
  

• 送信:

  zigzag skitch send logo.svg --trace
  

Illustrator ワークフローとの連携

• エクスポート: ファイル → エクスポート → SVG。スタイルは表示属性、ID はレイヤー名として保持。テキストは輪郭化するかフォールバックを設定。
• インポート: ZigZag で保存した SVG を Illustrator に戻して開くと、縫製設定が維持されます。
• 名前管理: レイヤーまたはオブジェクトに名前を付けると、縫製設定と連携します。Illustrator の

  _x3D_

  スタイルエスケープは解码され、グループ設定は全てに適用されます。

コマンドライントークンの意味

fill

satin

run

skip

a=45

s=0.3

l=3

pc=0.2

w=3

border

u=0

ul=center+contour+zigzag

ss=0

r=3

contour

blanket

applique

manual

split=7

split=0

t=e8a33c

o=2

stroke.…

stroke.run

サンプルレイヤー名:

logo fill a=45 s=0.35, title satin, outline stroke.satin stroke.w=1.5

Bluetooth で Brother Skitch (PP1) を制御

Skitch ウィンドウは全体ジョブを実行します：左にデザイン、右に操作内容、上部にステップ（接続・ホーム・送信・試し縫い・刺繍・完了）。

1. 接続: 初回には Skitch のボタンを長押し。「接続」→「ペアリング」許可。
2. ホーミング: 機械はフレーム外から承認し、フレーム内へ移動します。
3. 送信: 配置位置（As Placed / センター）、使用する糸、チェックリストを確認して送信。
4. 試し縫い: デザインの輪郭だけ走査し、磁石・継ぎ目・つばがクリアされるか確認。
5. 刺繍開始: Start を押す。画像は未縫い部分を濃い色で表示。針と現在糸、タイムラインを表示。
6. 進行中操作: 開始／一時停止／停止（Skitch ボタンのみ）。最小化 (

   –

   ) でも刺繍継続可能。
7. エラー処理: エラー内容と対処法表示（糸切れ、bobbin 等）。糸切れ後は針がギャップを覆う動作を実行。
8. •••メニュー: 取扱説明ビデオやシミュレータ接続リンクあり。

非公式コマンド調査（開発者向け）

Skitch の Bluetooth セットアップでは、機械側のテンションダイヤルを使用します。Artspira との連携機能調査には以下の調査が可能です：

• 設定バイトの確認: Skitch ウィンドウ内の機械詳細で読み取り、

  skitch-settings.log

  に保存（

  zigzag skitch settings

  コマンド利用）。
• 通信キャプチャ (

  zigzag capture FILE

  ): Artspira の Bluetooth 録音からコマンド名と設定変化を抽出。

iPhone: Apple ブルートゥーミングログプロファイルインストール、PacketLogger で trace 保存。 Android: Developer options で HCI snoop log を有効化し、adb bugreport から抽出。

注意: 設定書き込みはレイアウト確定後、機械自体の読み戻りが一致するまで反映されます。

パリティ比較表

Ink/Stitch 対 ZigZag

Hatch 対 ZigZag

検証とテスト

• テストケース: ライブラリテスト 136 件、エディタ/MCP テスト 153 件。完全エージェントワークフロー、Skitch フロー、シミュレータ・Bluetooth 双方の動作確認済み。
• 互換性: 全ライター（PES, DST, EXP, JEF, VP3）は

  pyembroidery

  で読み戻し同等の確認。PEN 出力も手計算シーケンスと比較チェック。
• プラットフォーム: Mesa OpenGL でスタジオ動作、MCP を経由したエージェント駆動確認。実機 Brother Skitch (PP1) でもテスト済み。

スクリーンショットと動画の作成

• 起動キャプチャ:

  ZIGZAG_CAPTURE=<フォルダ>

  および ⌃⌥⌘S でフル解像度 PNG 保存。
• 録画: ⌃⌥⌘R で開始・停止。
• エンコード (ffmpeg 必須):

  packaging/media/encode.sh <フォルダ>/take-001 demo
  # demo.mp4 と demo.gif が作成される
  

クレジットとライセンス

• 依存関係: PES/PEC/DST レイアウトは

  pyembroidery

  (MIT) より。Image Trace は

  VectorCraft

  (MIT OR Apache-2.0) の vendored 版。曲線適合、ライブ角などの機能も移植済み（

  vendor/README.md

  参照）。
• ライセンス: 詳細は

  NOTICE

  と

  THIRD-PARTY-NOTICES.md

  を参照。依存関係変更時は

  packaging/licenses/generate.sh

  で再生成してください。