mxgraph编辑器的使用

原创

已于 2025-03-25 16:03:12 修改 · 613 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #mxgraph

于 2025-03-25 15:30:35 首次发布

前端JS如何使用mxgraph编辑器

说明：此项目是JS项目，目前还不支持TS

引入资源

可以直接从官网上拿下来，或者从其他地方获取

官网编辑器

如果只是展示图形的话只引入 mxClient.js就可以了

一个免费在线编辑器

自己用它做了一个在线编辑器，可以参考一下

当前项目源码

图形资源展示

const graph = new mxGraph(document.getElementById('graph'))
graph.model.clear()
let xmlDoc = mxUtils.parseXml(xml);
let codec = new mxCodec(xmlDoc);
codec.decode(xmlDoc.documentElement, graph.getModel());
graph.setEnabled(false);
// graph.fit(); // 自适应缩放

图形展示图

编辑器

// 编辑器
(function () {
   
   
    // 语言资源
    let bundle = 'https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt';
    // 默认样式
    let defaultThemes='https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/styles/default.xml'
    mxUtils.getAll([bundle,defaultThemes ],