Mermaidは、JavaScriptベースの図表作成ツール。Markdownから着想を得たテキストによる定義を用いて、Webブラウザ上で図表を動的に作成でき、フローチャート、UML、Gitグラフ、ガントチャートといった、ソフトウェアプロジェクトで一般的に用いられる図表に対応している。
原理的には、「mermaid」とマークされたコードブロックにて、Mermaid構文を取得してMermaid.jsへ渡すiframeが生成され、コードをブラウザ上で図表に変換する。
この仕組みには、GitHubのHTMLパイプラインと内部ファイルレンダリングサービスであるViewscreenが使われており、HTMLパイプラインがMermaidに渡されるコードを検出し、スクリーンリーダやAPIリクエストといったJavaScript以外を対象にしている場合は元のMarkdownコードが参照される。HTMLパイプラインが検出したコードは、JavaScriptに対応した環境で用いられると仮定され、iframeが挿入され、src属性をViewscreenにポイントしている。
このような方法は、ライブラリを外部サービスへオフロードすることでRailsから提供しなければならないJavaScriptペイロードを小さく保てるほか、図表を非同期レンダリングすることによって、複数図表のレンダリングによるオーバーヘッドの発生を防げる。また、ユーザーが作成したコンテンツがiframeにロックされるので、図表を読み込むGitHubページに悪さをされる可能性が低くなる。
