googleドキュメントにmermaid.jsを書く

googleドキュメントはオンライン上で編集できてとても便利
そこにmermaid.jsも書きたい！ってことでやってみた

ドキュメントを書く

こんな感じ
f:id:naosim:20181101171058p:plain
これを読み込んでHTMLのページ上に図を表示します

スクリプトエディタでプログラムを書く

ツール > スクリプトエディタでエディタを開いてプログラムを書きます

//ドキュメントのID
var DOC_ID = 'YOUR_DOCUMENT_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()
  }
}

YOUR_DOCUMENT_IDのところにドキュメントのIDを入れます
具体的にはドキュメントのURLの↓この部分です https://docs.google.com/document/d/!!ココ!!/edit

HTMLを作る

ファイル > 新規作成 > HTMLファイルを選択しindex.htmlというファイルを作ります
ファイルの中身はこんな感じ

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://unpkg.com/mermaid@7.1.2/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>

公開する

公開 > ウェブアプリケーションとして導入を選択して必要事項を埋める
アプリケーションにアクセスできるユーザを自分だけにすると自分以外見れないので安心です

作成したサイトのURLにアクセスすると図が表示される

キターー！

f:id:naosim:20181101171300p:plain

まとめ

mermaid.jsが手軽にかけるようになった
markdown + mermaid.jsが表示できるようにしたくなってきた！
開発は続く