濃いマスほど、このテーマでその指標が高いことを示します。
明瞭84
説得55
密度60
制作コスト30
課題適合82
仕事適合88
低高
短い答え
人魚のテキスト図はいつ選ぶ？
次の条件に合う。プロセスドキュメント、オンボーディング、割り当てロジック、PR 説明
いつ避ける？
次の場合は別の形にする。フリーハンド レイアウトが必要なピクセル完璧なブランド イラスト
誰が作り、広めた？
Mermaid (2014) は、GitHub 上で Markdown ネイティブの図を普及させました。
何を符号化する？
SVG ボックスとエッジにレンダリングされたテキスト グラフ構文
広告に使ってよいか？
Yahoo・LINE・Meta素材で主張が一目なら可。難しければランディングに図を置く。
課題に使えるか？
実験レポートとポスターで軸・単位・出典があれば通る。
人魚のテキスト図はSVG ボックスとエッジにレンダリングされたテキスト グラフ構文として値を載せます。Mermaid (2014) は、GitHub 上で Markdown ネイティブの図を普及させました。。
業務報告・広告・課題では「プロセスドキュメント、オンボーディング、割り当てロジック、PR 説明」に向く。「フリーハンド レイアウトが必要なピクセル完璧なブランド イラスト」のときは別の形を選ぶ。
ソフト
- Mermaid — テキストからのフロー、シーケンス、クラス、ER など - MIT ライセンス。 · MIT · github.com/mermaid-js/mermaid
- Mermaid CLI — SaaS を使用せずに、CI で図を SVG/PNG にレンダリングします。 · MIT · github.com/mermaid-js/mermaid-cli
- markdown-it — 多くの場合、ドキュメントに図のフェンスを埋め込むために組み合わせられます。 · MIT · github.com/markdown-it/markdown-it
- GitHub markup notes — README ファイルで、Forge がどのように人魚をレンダリングするかを調べてください。 · MIT · github.com/github/markup
- Flow demo SVG — このアトラス上の静的フローチャート教育マーク。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
書き出し
- 書き出し 1 — SVG
- 書き出し 2 — PDF
- 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
- 書き出し 4 — ウェブはSVG、印刷はPDF
アクセシビリティ
- アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
- アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
- アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
- アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。
人魚のテキスト図: SVG ボックスとエッジにレンダリングされたテキスト グラフ構文を守り、「フリーハンド レイアウトが必要なピクセル完璧なブランド イラスト」のときは別の図を選ぶ。