12種類の図法
Deployment、Graph、Component、Flowchart、Activity、State、ER、Class、Use case、Sequence、Timing、Slideに対応。
01 / THE INTERACTION
描く。整える。また考える。
- 01
テキストで描く
要素とつながりを短いテキストで定義。Finchスキルを通じて、AIに下描きを頼むこともできます。
- 02
自動で並べる
Auto Layoutが図を配置。構成図、フローチャート、UMLなど、用途に合う図法を選びます。
- 03
手で仕上げる
ノードをドラッグし、位置を固定。伝えたい内容に合わせて、読みやすい配置へ整えます。
- 04
更新を重ねる
ノードIDを保てば、内容を変えても配置を引き継げます。ソースと配置をまとめて保存できます。
02 / UNDER THE HOOD
意味と配置を、別々に持つ。
短いソースを解析してSVGへ。人が整えた位置とPinはLayout Overlayに残し、次の描画へ引き継ぎます。
01
DSLを解析
人やAIが書いた短いソースをParserが図の要素と関係へ変換します。図法ごとのプラグインが意味を解釈します。
02
配置してSVGへ
Auto Layoutがノードと線の位置を決め、SVG Rendererがブラウザー上に図を描きます。
03
手で仕上げる
標準Editorでノードをドラッグし、Pinで位置を固定。変更した座標はソースとは別のLayout Overlayに残ります。
04
更新しても残る
ノードIDを保ってソースを更新すると、配置を再利用できます。ソースとOverlayはHTMLやMarkdownにまとめて保存できます。
03 / POSSIBILITIES
できること
編集できる形で保存
ソースと配置をHTMLやMarkdownに保存。資料や共有用にはSVG・PNGで書き出せます。
図に合った表現
テーマ、役割色、アイコン、画像を組み合わせて表現。追加のクラウドアイコンパックや独自テーマも利用できます。
AIとつくるためのスキル
エージェント向けのFinchスキルを同梱。文章で内容を伝えて図を作り、最後の配置を自分の手で調整できます。
04 / IN PRACTICE
一枚の図から、アプリへの組み込みまで。
- ブラウザーで試す
- 公開デモから編集・配置・保存を試せます。HTMLのscript要素から使えるブラウザー版も用意しています。
- アプリに組み込む
- npm install @hachiware-labs/finch-js で導入。保存コールバックやMarkdownへの書き戻しは組み込みガイドで確認できます。
- オープンソース
- MIT Licenseで公開。ソースコード、図法ごとの作例、日本語ドキュメントをGitHubで確認できます。
EXPLORE FURTHER
まずは、一枚の図から。
作例を開いて、要素を足し、動かして、保存する。日本語チュートリアルで一通りの操作を試せます。