SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

GitHub、Mermaidを用いてMarkdownファイルに図表を挿入する方法を紹介

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • X ポスト
  • このエントリーをはてなブックマークに追加

 米GitHubは、Mermaidを使用してMarkdownファイルに図表を埋め込む方法を、公式ブログにおける2月14日(現地時間)付の投稿にて紹介している。

 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ページに悪さをされる可能性が低くなる。

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15584 2022/02/16 08:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング