概要
HTMLの中にMarkdownを直接記述し、ブラウザで表示するといい感じに表示されるHTMLを書いた。mermaid.jsにも対応している。htmlをブラウザで表示するだけで、ローカルサーバを立てる必要はなく、管理者権限は不要。
sample.htmlを見ると大体どういうことかわかる。
本編
「ちょっとパワポに通信シーケンスを記載してください」
シーケンス図やフローチャートをつくる際、何を使うか。PowerPointか、それともExcelか。
私はMermaid.jsを使いたい。
Mermaid.jsはテキストからシーケンス図やガントチャート、クラス図、フローチャートなどいろいろ生成してくれるjavascriptで様々なMarkdownエディタに組み込まれていたりするツールである。
下記のコードから図のシーケンス図を生成することができる。
特にVSCodeやAtomにMarkdown Preview Enhancedを入れるとリアルタイムでプレビューしながらMermaid.jsや数式を書くことができてとても便利である。
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
しかし、管理者権限がない
いつでもVSCodeの環境を用意できるとは限らない。会社の環境では管理者権限がなかったりする。その場合どうすればよいか。
VSCode ZIP版
Visual Studio Codeにはインストーラ版のほかにZIP版も提供されている。ただし、Electronで作られているからかサイズは100MB超とやけにでかい。
管理者権限が与えられないようなセキュアを求められている環境だとProxyなども入り、VSCode経由でExtensionを入れられないかもしれない。普通はProxyの設定を自動で読み込んでくれるらしいが、ZIP版だからかうまく設定が入らなかった。
そうした場合、Extensionを手動でインストールすることもできる。
ここからvsxiファイル（Extensionのファイル）をダウンロードしてインストールできる。ただし、Markdown Preview Enhancedは35MBくらい。
だいたいはこれで解決するだろうが、私の環境は貧弱すぎてインストール中に死んだ。軽量なエディタとは。
他のjavascript製エディタ
最近作られたjavascript製のエディタは大体ファイル保存とか便利機能を付けたくなるので、サーバーサイドなjavascriptである。実行にはローカルサーバを立てる必要があり、やっぱりそれには管理者権限が必要である。
Electronで作られたものは動きそうだがそれはつまりVSCodeである。
メモ帳でHTML直書き
なんとかしようといろいろ調べて頭がおかしくなった結果、１つの答えにたどり着いたたどり着いた。
- 軽量で
- 保存もできて
- 管理者権限が不要で
- 共有も容易
な素晴らしい手段だ。それはHTMLのソース内にMarkdownを直書きである。
HTMLの中にMarkdwonを書き、それをjavascriptでコンパイル、HTML&シーケンス図に変換する。
Marked.js
いろいろなjavascript製のmarkdownエディタを眺めていると、markdownのparser&compilerとして大体marked.jsを利用している。marked.parse()にテキストを渡すとmarkdownをHTMLにコンパイルしてくれる。
いろいろ弄ったところ、HTMLのソースに直書きしたMarkdownをいい感じに表示することができた。
<body>
<article class="markdown-body" id="view"></article>
<textarea id="content" hidden>
<!-- Markdown area -->
</textarea>
<script src="./js/marked.min.js"></script>
<script>
document.getElementById('view').innerHTML =
marked.parse(document.getElementById('content').value);
</script>
</body>
marked.jsに変換させるテキストは適当に<div>タグのものを渡してはいけない。ご親切にサニタイジングされたり、改行が消されたりしてmermaid.jsがパースエラーを起こす。他のエディタを参考にするとtextareaにした。今回はhidden属性を付与したtextareaにMarkdownを書き、articleにmarked.jsのコンパイル結果を突っ込む形になっている。
Marked.js + Mermaid.js
marked.jsのオプションを眺めるとコードブロックにhighlight.js反映させるオプションで適当にjavascriptが書けることが読み取れる。じゃあ、コードブロックの言語指定にmermaidを指定したらmermaid.jsを呼び出すようにすればいいかと適当に書いてみたらそれっぽく動いた
marked.setOptions({
langPrefix: "",
highlight: function (code, lang) {
if (lang === "mermaid") {
return mermaid.mermaidAPI.render('mermaid0',code,undefined);
} else {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
}
});
あとはCSS入れたりなんなりしたものを下記に公開している。クローンもしくはZIPでダウンロードして、sample.htmlをブラウザで開いてみてほしい。ソースコードにはMarkdownがそのまま書いてあり、ブラウザの表示はそれっぽいはずである。
https://github.com/hibitomo/marked_with_mermaid/blob/main/sample.html
正直、これでいいのか雰囲気で書いたのでまったく全く分からん。
まとめ
管理者権限がないけど、Markdown＋Mermaid.jsが使いたいとき
- VSCode ZIP版: 使えそうだがファイルはでかい。軽量とはなんだったのか。
- Javascript製エディタ: ローカルサーバ建てる系は無理。Electronとかなら。。。。
- メモ帳 + HTML: 軽量だし、みんな使える。
おまけ
easyMDEというMarkdownEditorもMarked.jsベースなのでMermaid.js対応できる。
- easyMDE_with_mermaid
- https://github.com/hibitomo/easyMDE_with_mermaid
- easyMDEのmarked.jsオプションを弄ってmermaidが使えるように。ただしリアルタイムレビューは何もケアしなかったのでバグってる
- 記載内容はブラウザにautosaveされるが、貧弱な環境だといつ消し飛ぶか分からないのでちゃんとファイルにコピペして保存したほうがよい。