Skip to content
stellarcieloPublic

About

ネットワークトポロジ図を作るための macOS アプリ

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Repository files navigation

Constella のアイコン

Constella

ネットワークトポロジ図を作るための macOS アプリです。機器を置いてポートを選んでつなぐ GUI と、人や AI が書ける YAML が、双方向に同期します。

  • インターフェース中心: 機器は機種(モデル)を持ち、機種に応じたポートが用意されます。リンクは必ず「機器:ポート」同士を結び、ポートの使用状況や二重使用もすぐ分かります。SFP などのポートには挿しているトランシーバ(光モジュール)も書けて、ポートやリンクの両端に合うかを確かめます。
  • GUI と YAML の双方向同期: どちらで編集しても、もう一方にすぐ反映されます。YAML のコメントは残ります。
  • 自動レイアウト: 接続関係だけを書いた YAML も、開くと役割ごとの段に並びます。
  • ネットワーク情報の表示: 拠点・ラック・VLAN・サブネットの枠(GUI でも作れます)、IF の IP と VLAN、L1 / L2 / L3 の表示切り替え。
  • 仮想化基盤(Proxmox VE など): ホストとゲスト(VM・コンテナ)、ブリッジ・bond・VLAN インターフェース、クラスタ、SDN を描けます。VLAN がスイッチまで通るかも確かめます。Proxmox VE の構成から図を作ることもできます。
  • そのほか: SVG / PNG の書き出し、取り消し・やり直し、コピー&ペースト、右クリックのメニュー、実機の機種(ユーザーモデル)の追加と管理、機種ごとのアイコンの置き換え(自分の画像も使えます)、機種とアイコンのまとめての書き出し・読み込み。

インストール

対応: macOS 13.3 以降(Apple Silicon・Intel)

  1. Releases から Constella_<バージョン>_universal.dmg をダウンロードします。
  2. DMG を開き、Constella を「アプリケーション」フォルダにドラッグします。
  3. 初めて開くと、「Apple は “Constella” を検証できませんでした」のような表示が出ます。Apple の Developer ID での署名・公証をしていないためです。次の手順で開けます。
    1. 表示を「完了」(または「OK」)で閉じます。
    2. システム設定 > プライバシーとセキュリティ を開き、下の方にある「“Constella” は…」の横の「このまま開く」を押します。
    3. もう一度確認が出たら、「このまま開く」を押します。

2 回目からは、普通に開けます。

使い方

  • 左のパレットから機器をキャンバスにドラッグして置き、「接続」モード(C キー)で 2 台をクリックしてポートを選ぶと、つながります。AP の無線のポート(wlan0 など)には、何本でもつなげます。

  • 機器・線・枠のラベル・何も無い所を右クリックすると、その場でできること(接続を始める・コピー・グループにする・まっすぐに戻す・ここにペースト など)が出ます。

  • リンクの両端の IF 名ラベルは、ドラッグで好きな位置に動かせます。ダブルクリックすると自動の位置に戻り、ツールバーの「ラベルを戻す」ですべて戻せます。

  • リンクを選ぶと線につまみが出て、線を曲げられます。区間の真ん中の丸をドラッグすると曲げる点が増え、四角い点はドラッグで動かし、ダブルクリックで消せます。同じ 2 台の間の線(LAG など)は、まとめて曲がります。

  • 機器を動かすと、ほかの機器と縦・横がそろう位置や、同じ行・列の機器と等間隔になる位置で吸い付き、ガイドの線が出ます(⌥ を押している間は吸い付きません)。ツールバーの「グリッド」を入れると、背景の点にも合わせます。

  • 機器を選んで ⌘G(編集 > グループにする)を押すと、グループ(拠点・ラック・VLAN などの枠)を作れます。枠のラベルをクリックするとグループを選べ、インスペクタで種類・ラベル・メンバーを変えられます。⇧⌘G で解除します(機器は残ります)。

  • 右下の YAML エディタで、直接書くこともできます。書き方は docs/SPEC.md の 4 章と、examples/ のサンプルを見てください。

  • YAML の先頭に次の行を書くと、VS Code の YAML 拡張機能などで補完と検証が効きます(アプリで新規作成したファイルには、最初から入っています)。

    # yaml-language-server: $schema=https://raw.githubusercontent.com/stellarcielo/Constella/main/schema/constella.schema.json
  • 実機の機種は、パレットの「+」から追加できます。保存先は ~/Library/Application Support/Constella/models/ です。

  • パレットの「管理」(ファイル > モデルの管理…)で、機種の一覧・複製・編集・削除と、アイコンの設定ができます。アイコンは、組み込みのアイコンから選ぶか、自分の画像(SVG・PNG)を取り込んで使えます。取り込んだ画像は ~/Library/Application Support/Constella/icons/ に入り、SVG・PNG の書き出しにも埋め込まれます。

  • モデルの管理画面の「書き出す…」で、自分の機種と、それが使うアイコンの画像を 1 つのファイル(constella-models.yaml)にまとめられます。別の Mac では「読み込む…」で取り込めます。

Proxmox VE から取り込む

Proxmox VE のクラスタ(ノード 1 台だけでも)の構成から、図を作れます。

  1. scripts/proxmox-export.sh を、どれか 1 台のノードにコピーし、root で実行します。設定を読むだけで、変えることはありません。

    sh proxmox-export.sh > constella-proxmox.json
  2. できた constella-proxmox.json を Mac にコピーし、ツールバーの「取り込む」(ファイル > Proxmox VE から取り込む…)で選びます。

  3. ノード・bond・ブリッジ・VLAN インターフェース・VM・コンテナと、そのつながりが、新しい図になります。クラスタ(corosync・移行・Ceph のネットワーク)と、SDN のゾーン・VNet も取り込みます。スイッチと物理的な配線は取り込めないので、図に足してつなぎます。

開発

必要なもの: Node.js、Rust、Xcode の Command Line Tools

npm install
npm run tauri dev
  • npm run tauri dev の間、画面の部品(.tsx)と CSS の変更はその場で反映し、ほかのファイルを変えるとアプリを読み直します。読み直すと、開いていた図は閉じます(保存していない変更は消えます)。
  • 確認: npm run typecheck && npm run lint && npm test && npm run format:check
  • 配布用のビルド(ユニバーサル版): npm run build:mac(Intel 用のターゲットが必要: rustup target add x86_64-apple-darwin)
  • リリース: v0.1.0 のようなタグを push すると、GitHub Actions がビルドして、下書きの Release に DMG を載せます。

仕様は docs/SPEC.md、開発の進め方は CLAUDE.md にあります。

About

ネットワークトポロジ図を作るための macOS アプリ

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Contributors

Languages