擬似的にPlantUMLを埋め込む
/forum-jp/PlantUMLの表示に対応して欲しいによると、Scrapbox側でPlantUMLの表示に対応する予定はないらしい。
なので画像の埋め込みで代用する。
こんな感じ：
画像をクリックすると、PlantUMLのcodeが表示される
画像に外部リンクを埋め込む方法を使っただけ
手順
1. PlantUML Web ServerにPlantUMLのcodeを貼り付けて、URLを生成する
eg.
code:uml
@startuml
Bob -> Alice : hello
@endumlgenerated URL:
2. URLのHash部分で、
[http://www.plantuml.com/plantuml/svg/{Hash}#.png http://www.plantuml.com/plantuml/uml/{Hash}] の {Hash} を置き換える↑の操作を簡単に行うUserScript
script.js scrapbox.PopupMenu.addButton({
title: 'PlantUML',
onClick: text => {
//PlantUML serverのURLでなければ何もしない
if(!/http:\/\/www\.plantuml\.com\/plantuml/.test(text)) return text;
//Hashを抽出
const hashId= text.replace(/http:\/\/www\.plantuml\.com\/plantuml\/\w*\//,'');png画像にしたいときは、
svg を png に置き換える /uml/ を /umla/ にすると、codeとUMLが水平方向に並べて表示されるscript.js return `[http://www.plantuml.com/plantuml/svg/${hashId}#.png http://www.plantuml.com/plantuml/uml/${hashId}]`;
}
})