aardio 调用 Mermaid,Graphviz 绘图

使用强悍的 WebView2 调用 Mermaid.js 很简单,aardio 源代码如下:

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(`
	(text)=>{
	mermaid.render('graphDiv',text,(svg)=>{
			var ele = document.getElementById("graphDivParent");
 			ele.innerHTML = "" + svg + "";
 		});	
	}`,'graph TB
a-->b')	
}

winform.show();
win.loopMessage();

至于 Graphviz 可以直接调用 DLL 接口,一个简单的例子:

var gvcDll = raw.loadDll("\bin\gvc.dll",,"cdecl");
var cgraphDll = raw.loadDll("\bin\cgraph.dll",,"cdecl"); 

renderImage = function(source,format,engine,fileName) { 
	
	var g = cgraphDll.agmemread(source);
	if (!g) return null,"创建图表失败,请检查是否存在语法错误.";

	var gvc = gvcDll.gvContext();
	if ( !gvc || ( gvcDll.gvLayout(gvc, g, engine:"dot") != 0 ) ) {
		cgraphDll.agclose(g);
		return null,"布局失败.";
	}

	var result;
	if(fileName){
		result = (gvcDll.gvRenderFilename(gvc, g, format:"png", fileName) != 0);
	}
	else{
		var data,length = {ptr p},{INT n}
		if (gvcDll.gvRenderData(gvc, g, format:"png",  data,  length) == 0) {
			result = ..raw.buffer(length.n,data.p);
		} 
		
		gvcDll.gvFreeRenderData(data.p);
	}

	gvcDll.gvFreeLayout(gvc, g);
	cgraphDll.agclose(g);
	gvcDll.gvFreeContext(gvc);
	
	return result;
};   
	
readerFile = function(source,fileName,engine){
	fileName = ..io.fullpath(fileName);
	var format  = ..io.splitpath(filename).ext;
	if(!#format) error("错误的文件路径参数",2);
	
	format = ..string.right(format,-2);
	return renderImage(source,format,engine);
};


var data = renderImage("
strict graph { 
  a -- b
  a -- b
  b -- a [color=blue]
} ")
发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章