擬似的にPlantUMLを埋め込む

/forum-jp/PlantUMLの表示に対応して欲しいによると、Scrapbox側でPlantUMLの表示に対応する予定はないらしい。

なので画像の埋め込みで代用する。

こんな感じ：

http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKiX8pSd9vt98pKi1IW80#.png http://www.plantuml.com/plantuml/uml/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKiX8pSd9vt98pKi1IW80

画像をクリックすると、PlantUMLのcodeが表示される

画像に外部リンクを埋め込む方法を使っただけ

手順

1. PlantUML Web ServerにPlantUMLのcodeを貼り付けて、URLを生成する

eg.

code:

code:uml

@startuml

Bob -> Alice : hello

@enduml

generated URL:

http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKiX8pSd9vt98pKi1IW80

2. URLのHash部分で、[http://www.plantuml.com/plantuml/svg/{Hash}#.png http://www.plantuml.com/plantuml/uml/{Hash}]の{Hash}を置き換える

↑の操作を簡単に行うUserScript

code: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が水平方向に並べて表示される

code:script.js

return [http://www.plantuml.com/plantuml/svg/${hashId}#.png http://www.plantuml.com/plantuml/uml/${hashId}];

}

})