概要

GASを使ってGoogleドキュメントに書いたmermaidのコードを図で描画させるます

嬉しい点

Googleドキュメントのコードを変更すると連動してデプロイした図も変更される

やり方

Googleドキュメントを作成して、mermaidのコードを貼ります

拡張機能→Apps Scriptをクリック

エディタが開かられるので、以下のコードを貼り付けて、DOC_IDを書き換えます。

//ドキュメントのID
//https://docs.google.com/document/d/ここの部分がDOC_ID/edit?tab=t.0
var DOC_ID = 'XXXXX';

// HTMLを表示する
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

// ドキュメントの内容を取得する
function getDocs() {
  var docs=DocumentApp.openById(DOC_ID);
  return {
    title: docs.getName(),
    text: docs.getBody().getText()
  }
}

次に表示するhtmlファイルを作ります。
ファイル欄のプラスボタンから作成

名前をindexにして登録

htmlタグを以下で書き換えます

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://unpkg.com/mermaid@11.4.1/dist/mermaid.js"></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <div id="mermaid" class="mermaid"></div>
    <script>
    function update() {
      google.script.run
        .withSuccessHandler(function(result) {// 戻り値に対する処理
          document.querySelector('#title').innerHTML = result.title;
          document.querySelector('.mermaid').innerHTML = result.text;
          mermaid.init();// mermaidを更新
        })
        .getDocs();
    }
    
    update();// 初回実行
    
    mermaid.initialize({startOnLoad:false});
    </script>
  </body>
</html>

そしたら画面右上のデプロイボタンをクリックし、新しいデプロイを選択

ウェブアプリを選択

アクセスできるユーザーを調整して、デプロイボタンをクリック！

アクセスを承認しろと言われたら、Advancedをクリックして、Gotoなんとかをクリックし承認！！

デプロイされたURLリンクが記述されてるのでアクセス！

ぱんぱかぱーん！！！表示されました！！！

超絶参考