
2025/12/04 22:16
Show HN: Fanfa – Interactive and animated Mermaid diagrams
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
概要:
Fanfa の新機能「Visual BrainLive」は、静的な Mermaid ダイアグラムをアニメーション化し、映画のような視覚体験に変換します。基本的には、ユーザーが操作しやすいコントロール(ドラッグで移動、スペースバー1回押しでパン、スクロールでズーム、ダブルクリックでリセット、100 % ズーム切替)を追加し、詳細を失うことなく図の任意の部分に集中できるようにします。パネルはドラッグでサイズ変更が可能で、レイアウトを完全に制御できます。
Mermaid の馴染み深い構文をベースにしており、Visual BrainLive は SVG レベルのアニメーションを注入し、元の忠実度を保ちつつ動きを加えます。これによりダイアグラムは静的なスナップショットではなく「生きている」ように感じられます。ワークフローはシンプルで、Mermaid コードをエディタに貼り付けるとリアルタイムでアニメーションが再生され、レンダリングされたビューへのリンクを共有し、必要に応じて調整できます。迅速なイテレーションや共同設計セッションに最適です。
この高度なビジュアルストーリーテリングは、開発者・デザイナー・教育者・プロダクトチームのエンゲージメントを向上させます。複雑な図を理解しやすく魅力的にすることで、Visual BrainLive はドキュメンテーション、学習リソース、および業界横断的な動的プレゼンテーションの定番ツールになる可能性があります。
本文
Fanfa Visual Brain – MermaidからMotionへ
- ドラッグでパン
- スペース+ドラッグでナビゲーション
- スクロールでズーム
- ダブルクリックでリセット
- 100%ドラッグでサイズ変更
- ダブルタップでリセット
Mermaid コードを貼り付けると、映画のような SVG アニメーションで息吹く様子が見られます。SVG レベルでリアルタイムに Mermaid を忠実再現。図を作成し、リンクを共有し、迅速に反復しましょう。