インストール

このガイドでは、Figramのインストールとセットアップ方法を説明します。

前提条件

Node.js v18以降（またはBun）
Figma Desktop

クイックスタート

1. CLIのインストール

npm install -g figram

またはnpxで直接実行（インストール不要）:

npx figram <command>

2. ダイアグラムの作成

npx figram init

現在のディレクトリにdiagram.yamlテンプレートが作成されます。

3. FigJamプラグインのインストール

Figma Communityからインストール
FigJamファイルを開く
プラグインメニューからfigramプラグインを実行

4. ライブ同期の開始

npx figram diagram.yaml

FigJamプラグイン上で:

YAMLファイルのdocIdを入力
ws://127.0.0.1:3456に接続

ダイアグラムが表示され、YAMLを編集すると自動的に同期されます！

CLIコマンド

`figram init`

diagram.yamlテンプレートを作成します。

npx figram init

`figram build <file>`

YAMLをJSON形式に変換します。

npx figram build diagram.yaml
# 出力: diagram.json

`figram serve <file>`（デフォルト）

ファイル監視付きでWebSocketサーバーを起動します。デフォルトコマンドのため、serveを省略できます:

npx figram diagram.yaml
# または明示的に:
npx figram serve diagram.yaml

オプション:

オプション	説明
`--port, -p`	ポート番号（デフォルト: 3456）
`--host`	バインドするホスト（デフォルト: 127.0.0.1）
`--no-watch`	ファイル監視を無効化
`--allow-remote`	リモート接続を許可
`--secret`	接続にシークレットを要求
`--icons`	カスタムアイコンファイルのパス

アイコン表示

Figramは利用可能な場合、FigJamの標準クラウドプロバイダーシェイプを使用します。これには以下が必要です:

FigJam Pro、Organization、またはEnterpriseプラン（標準シェイプライブラリを含む）

無料プランユーザー（カスタムアイコン）

無料プランでFigJamの標準シェイプにアクセスできない場合、ノードはラベル付きのシンプルな矩形として表示されます。以下の方法でカスタムアイコンを追加できます:

オプション1: figram-icons.yaml（推奨）

ダイアグラムと同じディレクトリにfigram-icons.yamlファイルを作成:

version: 1
icons:
  aws:
    "compute.ec2": "./icons/ec2.png"
    "database.rds": "./icons/rds.png"
    "compute.lambda": "./icons/lambda.png"

アイコンファイル（PNG、JPGなど）をicons/フォルダに配置:

project/
  diagram.yaml
  figram-icons.yaml
  icons/
    ec2.png
    rds.png
    lambda.png

サーバーを起動 - アイコンは自動で検出されます:

npx figram diagram.yaml

オプション2: diagram.yaml内にインライン定義

ダイアグラムファイル内に直接アイコンを追加:

version: 1
docId: "prod"
icons:
  aws:
    "compute.ec2": "./icons/ec2.png"
    "database.rds": "./icons/rds.png"
nodes:
  - id: web
    provider: aws
    kind: compute.ec2
    # ...

オプション3: 明示的なアイコンファイル指定

カスタムアイコンファイルのパスを指定:

npx figram serve diagram.yaml --icons path/to/my-icons.yaml

優先順位

複数のアイコンソースが利用可能な場合、以下の優先順位でマージされます（高い順）:

インラインアイコン（diagram.yaml内）
外部ファイル（figram-icons.yamlまたは--iconsフラグ）

これにより、共通アイコンを外部ファイルで定義し、特定のアイコンをインラインで上書きできます。

公式アイコンのダウンロード

以下から公式クラウドプロバイダーアイコンをダウンロードできます:

AWS: https://aws.amazon.com/architecture/icons/
GCP: https://cloud.google.com/icons
Azure: https://learn.microsoft.com/en-us/azure/architecture/icons/

アイコンパスの解決

相対パスはYAMLファイルの場所から解決されます
絶対パスはそのまま使用されます
対応フォーマット: PNG, JPG, JPEG, GIF, WebP
注意: SVGはFigJamの画像APIでサポートされていません

階層フォールバック

アイコンは階層的なマッチングをサポートします。例えば、compute.ec2のアイコンを定義すると、より具体的なアイコンが定義されていない限り、compute.ec2.t3やcompute.ec2.customにも使用されます。

Claude Code プラグイン

Claude Codeを使用している場合、FigramプラグインをインストールすることでYAML構文のヘルプやトラブルシューティングガイドなど、AIによるダイアグラム作成支援を受けられます。