Eraserは、エンジニアチーム向けのドキュメントとダイアグラムプラットフォームです。視覚的に表現力豊かなドキュメントを作成するために、独自の記法を採用しています。このガイドでは、Eraserの記法を詳しく説明し、さまざまな例を使ってその使用方法を紹介します。

Eraser 記法ガイド②
前回のガイドでは、Eraserの基本的な記法を説明しました。今回は、さらに高度な記法とより多くの例を紹介します。エンティティ関係図 (ERD)Eraserは、エンティティ関係図 (ERD) を作成するための記法も提供しています。ERDは、デ...
基本構文
Eraserの記法は、YAMLに似た簡潔な構文を使用しています。基本的な構文は以下のように記述されます。
// ノード定義
ノード名 [属性] {
// サブノード定義
サブノード名 [属性]
}
// 関係定義
ノード1 > ノード2: [ラベル]
説明:
//はコメントアウトを示します。ノード名は、ダイアグラムの要素(ノード)の名前です。属性は、ノードの形状、色、アイコン、テキストなどを指定します。サブノード名は、ノード内にネストされた要素の名前です。ノード1 > ノード2は、ノード1からノード2への関係を示します。[ラベル]は、関係の説明を追加するオプションのラベルです。
ノードの定義
ノードは、ダイアグラムの要素を表現します。ノードの定義では、ノード名、属性、サブノードを指定します。
属性
ノードの属性は、[]で囲んで指定します。以下の属性が使用できます。
shape: ノードの形状を指定します。oval: 楕円rectangle: 長方形diamond: ひし形rounded_rectangle: 角丸長方形cylinder: 円筒hexagon: 六角形triangle: 三角形parallelogram: 平行四辺形cloud: クラウドstar: 星形database: データベース
icon: ノードに表示するアイコンを指定します。file-text: ファイルbug: バグcopy: コピーrepeat: 繰り返しzap: 電光check-square: チェックボックスpackage: パッケージsend: 送信user: ユーザーusers: 複数ユーザーhome: ホームfolder: フォルダmessage-circle: メッセージmail: メールclock: 時計list: リストkey: キーgrid: グリッドlink: リンクcalendar: カレンダーoracle: Oracletwitter: Twitterfacebook: Facebookaws-api-gateway: AWS API Gatewayaws-lambda: AWS Lambdaaws-simple-storage-service: AWS S3aws-ec2: AWS EC2aws-rds: AWS RDSaws-auto-scaling: AWS Auto Scalingaws-redshift: AWS Redshiftkafka: Kafkagcp-pubsub: GCP Pub/Subgcp-cloud-logging: GCP Cloud Logginggcp-dataflow: GCP Dataflowgcp-cloud-storage: GCP Cloud Storagegcp-datastore: GCP Datastoregcp-bigtable: GCP Bigtablegcp-bigquery: GCP BigQuerygcp-app-engine: GCP App Enginegcp-container-registry: GCP Container Registrygcp-compute-engine: GCP Compute Engineazure-active-directory: Azure Active Directoryazure-load-balancers: Azure Load Balancersazure-virtual-networks: Azure Virtual Networksazure-network-security-groups: Azure Network Security Groupsazure-virtual-machine: Azure Virtual Machinek8s-control-plane: Kubernetes Control Planek8s-api: Kubernetes APIk8s-sched: Kubernetes Schedulerk8s-c-c-m: Kubernetes Controller Managerk8s-c-m: Kubernetes Cloud Controller Managerk8s-etcd: Kubernetes etcdk8s-node: Kubernetes Nodek8s-kubelet: Kubernetes Kubeletk8s-k-proxy: Kubernetes KProxydatabricks: Databrickssnowflake: Snowflakeslack: Slacktensorflow: TensorFlowtableau: Tableaulayout: ウェブアプリdatabase: データベースfunction: クラウド関数cloud-cog: クラウド設定settings: 設定aws: AWSgoogle-cloud: Google Cloudazure: Azuregoogle: Googlemicrosoft: Microsoft
color: ノードの色を指定します。red: 赤green: 緑blue: 青yellow: 黄purple: 紫orange: オレンジgrey: 灰色silver: 銀色
text: ノードに表示するテキストを指定します。style: ノードのスタイルを指定します。dashed: 点線dotted: 点線bold: 太字italic: イタリック
サブノード
サブノードは、ノード内にネストされた要素を表現します。サブノードの定義は、ノードの定義と同様の構文を使用します。
# ノード定義
ノード名 [属性] {
# サブノード定義
サブノード名 [属性]
}
サブノードは、複数階層にネストすることができます。
グループ
グループは、関連するノードをまとめるための機能です。グループの定義は、{}で囲んで記述します。グループ内のノードは、[color]属性で色を指定することができます。
# グループ定義
グループ名 [color] {
# グループ内のノード定義
ノード名 [属性]
}
関係の定義
関係は、ノード間の接続を表現します。関係の定義は、ノード1 > ノード2の構文を使用します。
ラベル
関係のラベルは、:の後に指定します。ラベルは、関係の説明や注釈を追加するために使用します。
# 関係定義
ノード1 > ノード2: [ラベル]
関係の種類
Eraserでは、以下の関係の種類が使用できます。
>: 方向性のある関係(ノード1からノード2へ)<: 方向性のある関係(ノード2からノード1へ)<>: 双方向の関係(ノード1とノード2の間)
例
Issue Triage Flow

# ノードとグループ
Issue type? [shape: oval, icon: file-text]
BugPath [color: red] {
Bug [icon: bug, color: red]
Duplicate? [shape: diamond, icon: copy]
Mark duplicate [shape: oval, icon: copy]
Has repro? [shape: diamond, icon: repeat]
Ask for repro [shape: oval, icon: repeat]
}
FeaturePath [color: green] {
Feature [icon: zap, color: green]
Well specced? [shape: diamond, icon: check-square]
Can be package? [shape: diamond, icon: package]
Define as package [shape: oval, icon: package]
}
Issue ready to claim [shape: oval, icon: send]
# 関係
Issue type? > Bug
Bug > Duplicate?
Duplicate? > Mark duplicate: Yes
Duplicate? > Has repro?: No
Has repro? > Issue ready to claim: Yes
Has repro? > Ask for repro: No
Issue type? > Feature
Feature > Can be package?
Can be package? > Well specced?: No
Can be package? > Define as package: Yes
Well specced? > Issue ready to claim: Yes
Price Lookup Flow

# ノードと関係を定義 "A > B"
Start [shape: oval, icon: flag] > Read keywords from Excel [icon: excel]
Read keywords from Excel > Establish Amazon API connection [icon: amazon]
Establish Amazon API connection > Wait for user input [shape: diamond, icon: user]
Wait for user input > Search for keyword on Amazon[icon: search]: User selects keyword
Search for keyword on Amazon > Retrieve item price [icon: dollar-sign]
Retrieve item price > Output result to Excel [icon: excel]
Output result to Excel > End
Wait for user input > Close modal [icon: x]: User clicks cancel
Close modal > End [shape: oval, icon: check]
# グループを定義
For each keyword in the list [icon: repeat] {
Search for keyword on Amazon
Retrieve item price
Output result to Excel
}
まとめ
Eraserの記法は、視覚的に表現力豊かなドキュメントを作成するために設計されています。シンプルな構文と豊富な属性、関係の種類により、様々なダイアグラムを簡単に作成することができます。このガイドを参考に、Eraserの記法を活用して、より効果的なドキュメントを作成してみてください。
参考サイト
What is Eraser?
Eraser is a docs and diagrams platform for engineering teams . Eraser enables developers to create docs and diagrams at ...


コメント