PlantUMLファイルから画像URLを生成するserverless function
plantuml-proxyという名前でserverless functionを立てた
(private) https://vercel.com/takker99/plantuml-proxy
/icons/GitHub.icontakker99/plantuml-proxy
svg URLを画像にするPopup Menuみたいにコードブロック記法に書いたPlantUMLを即座に画像化できる
2021-09-08 06:53:10 どうやら公式でproxyが提供されていたらしい……
/forum-jp/PlantUMLの表示に対応して欲しい#6137603dbbe0ef0000d08470
/icons/知らんかった.icontakker.icon
だけどなぜか公式のproxyだとscrapboxのコードブロックを読み込めないらしい
2021-12-18 06:53:23 content-typeが正しくないと弾いているんじゃないか?
なので代わりにこのserverless functionを使う必要が依然としてある
まあ結果オーライということで
書式
https://plantuml-proxy.vercel.app/:img/:url
:url
PlantUMLが書かれたファイルへのURLを渡す
:type
画像の形式
pngかsvg
ファイルの中身をPlantUML serverに渡せる形式にencodingし、画像URLを取得してその中身を返す
実装したいこと
/icons/done.iconcodeのrefactoring
src/を作ってそっちにmoduleを移す
https://github.com/takker99/plantuml-proxy/pull/1
https://github.com/takker99/plantuml-proxy/pull/2
jpgも使えるようにする
ETagが動いたり動かなかったりする?
✅PlantUML serverのURLにredirectする
example
https://plantuml-proxy.vercel.app/png/https://scrapbox.io/api/code/takker/PlantUMLファイルから画像URLを生成するserverless_function/test1.puml#.svg
code:test1.puml
Bob->Alice : hello
Alice->Bob : 日本語でおk
https://plantuml-proxy.vercel.app/svg/https://scrapbox.io/api/code/takker/PlantUMLファイルから画像URLを生成するserverless_function/test2.puml#.svg
code:test2.puml
@startuml
hide empty description
* -right-> register
* -right-> ocount
* -right-> operator
* -right-> count
* -right-> motion
state "operator\ncount" as ocount
register --> ocount
register -right-> operator
ocount -right-> operator
operator -up-> count
operator -right-> motion
count -right-> motion
operator --> *
motion --> *
@enduml
from /suto3/plantuml-proxy
code:mechanism.puml
@startdot
digraph foo {
label="plantuml-proxyのしくみ";
node fontsize = 12, shape = box, style=rounded ;
s1 label="Scrapboxページ";
s2 label="plantuml-proxy";
s3 label="キャッシュ", shape=oval;
s4 label="PlantUML WebAPI";
s1 -> s2 label="コードブロックでPlantUMLを書く";
s2 -> s3 label="レンダリング結果をキャッシュ";
s2 -> s4 label="レンダリング";
{rank = same; s2; s3;}
}
@enddot
実装
vercel + deno
PlantUMLをREST API的に使うにある方法でencodingする
MD5 hashをETagに入れてcacheの比較をしている……が、効果があるのかはよくわからん
plantuml-proxyのprototype code
#2022-03-11 17:14:21
#2021-12-18 06:53:46
#2021-09-27 09:18:44
#2021-09-08 06:54:51
#2021-07-24 16:18:50
#2021-03-19 08:42:10
#2020-12-27
#2020-12-19 03:21:22