mxGraph是啥，自行百度吧，据说可以画流程之类的东西，粗浅的认识，官网https://www.jgraph.com/
下载地址github：https://github.com/jgraph/mxgraph
首先解压缩，然后把javascript\src文件夹拷贝出来2.11M或许这个是不需要的，
确实不需要，把javascript文件夹下的mxClient.min.js放到javascript\src\js里就够了，然后把src文件夹重命名为mx，大小为771K，
建立step-01.html文件
<html>
<head>
<title>step-01</title>
<script type="text/javascript">
mxBasePath = './mx';
</script>
<script type="text/javascript" src="./mx/js/mxClient.min.js"></script>
<script type="text/javascript">
function main(container)
{
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
mxUtils.error('这个浏览器不错!', 200, true);
}
}
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer">
</div>
</body>
</html>
关于mxUtils的文档，其它类似
http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxUtils-js.html
增加graphContainer的样式，需要去javascript\examples\editors\images里搬出grid.gif作为背景底纹
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('img/grid.gif');cursor:default;"
禁用浏览器右键菜单
mxEvent.disableContextMenu(container);
在容器中创建作图区
var graph = new mxGraph(container);
允许框选(只读是无效)
new mxRubberband(graph);
获取根节点
var parent = graph.getDefaultParent();
设置只读
graph.setEnabled(false);
画些东西进去
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Miku', 20, 20, 50, 30);
var v2 = graph.insertVertex(parent, null, 'Q!', 200, 150, 30, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
graph.getModel().endUpdate();
}
算是修正后的hello world吧
<html>
<head>
<title>step-01</title>
<script type="text/javascript">
mxBasePath = './mx';
</script>
<script type="text/javascript" src="./mx/js/mxClient.min.js"></script>
<script type="text/javascript">
function main(container)
{
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
mxUtils.error('这个浏览器不错!', 200, true);
mxEvent.disableContextMenu(container);
var graph = new mxGraph(container);
graph.setEnabled(false);
new mxRubberband(graph);
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Miku', 20, 20, 50, 30);
var v2 = graph.insertVertex(parent, null, 'Q!', 200, 150, 30, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
graph.getModel().endUpdate();
}
}
}
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer" style="position:relative;overflow:hidden;width:321px;height:241px;background:url('img/grid.gif');cursor:default;">
</div>
</body>
</html>
参考：
https://www.cnblogs.com/ptko/p/7048514.html
