//Mermaid 绘图
import win.ui;
/*DSG{{*/
var winform = win.form(text="Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库";right=966;bottom=622)
winform.add(
button={cls="button";text="绘图";left=643;top=552;right=878;bottom=604;color=14120960;font=LOGFONT(h=-14);z=2};
custom={cls="custom";text="自定义控件";left=10;top=6;right=958;bottom=535;z=1}
)
/*}}*/
import web.view;
var wb = web.view(winform.custom);
wb.html = /**
Here is one mermaid diagram:
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
And here is another:
**/
//aardio 调用 Mermaid.js 绘图
winform.button.oncommand = function(id,event){
wb.xcall(`
(graph)=>{
mermaid.render('graphTemp',//不要指定 graphDiv，否则会被删除
graph ).then(
(result,bindFunctions)=>{
var ele = document.getElementById("graphDiv");
ele.innerHTML = result.svg;
}
)
}`,'graph TB\na-->b')
}
winform.show();
win.loopMessage();