aardio 范例: Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库

//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 = /**
<!DOCTYPE html>
<html> 
  <body>
    Here is one mermaid diagram:
    <div class="mermaid">
        graph TD 
        A[Client] --> B[Load Balancer] 
        B --> C[Server1] 
        B --> D[Server2]
    </div>

    And here is another:
   <div id="graphDiv"></div>

   <script type="module">
      import mermaid from 'https://lib.baomitu.com/mermaid/10.9.0/mermaid.esm.min.mjs';
      window.mermaid = mermaid;

      //mermaid.initialize({ startOnLoad: true }); 
    </script>
   <script> 
   //mermaid.initialize({ startOnLoad: false }); 
   </script>
</body>
**/

//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();
Markdown 格式