urugus

    How_To_Write_Mermaid-Js_In_Google_Docs

    App Script を開く

    • Google ドキュメントで新規文書を開く
      • 拡張機能 > AppScript

    以下ファイルを作成

    jsファイル

    //ドキュメントのID
var DOC_ID = '<google-docs-id>';

// 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ファイル

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- @~ の部分は最新のバージョンにする -->
    <script src="https://unpkg.com/mermaid@10.6.0/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) {// 戻り値に対する処理
          console.log(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>

    デプロイ

    • 右上のデプロイ
      • 新しいデプロイ

    参考