网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。

引入库文件

<script type="text/javascript">

  mxBasePath = 'javascript/src/';

</script>

<script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

检查浏览器

<script type="text/javascript";>

function main(container)

{

// Checks if the browser is supported

//检查浏览器是否支持

  if (!mxClient.isBrowserSupported())

  {

// Displays an error message if the browser is not supported.

//如果浏览器不支持，则显示错误信息

  mxUtils.error('Browser is not supported!', 200, false);

}

...

Container 容器

Graph 图

var model = new mxGraphModel();

var graph = new mxGraph(container, model);

如果你希望graph图只读，可用 graph.setEnabed(false).

Vertices （节点）and Edges（连线）

// Gets the default parent for inserting new cells. This

// is normally the first child of the root (ie. layer 0).

//为插入节点获得默认的父节点。

//这通常是根节点的第一个子节点

var parent = graph.getDefaultParent();

// Adds cells to the model in a single step

//在单独的一步中添加cell

model.beginUpdate();

try

{

  var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);

  var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);

  var e1 = graph.insertEdge(parent, null, '', v1, v2);

}

finally

{

// Updates the display

//更新显示

  model.endUpdate();

}

Graphs 图

var node = document.getElementById('id-of-graph-container');

var graph = new mxGraph(node);

Model 编程模型

var root = new mxCell();

root.insert(new mxCell());

var model = new mxGraphModel(root);

Stylesheet 样式表

var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();

vertexStyle[mxConstants.ROUNDED] = true;

var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();

edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

Styles 样式

[stylename;|key=value;]

rounded;strokeColor=red;fillColor=green

上面Hello World！的例子是这样插入一个节点的：（注意样式的使用方法）

var v1 = graph.insertVertex(parent, null, 'Hello',

20, 20, 80, 30, 'rounded;strokeColor=red;fillColor=green');

Appearance 显示外观

mxGraph.prototype.getImage = function(state)

{

  if (state != null && state.style != null)

  {

    return state.style[mxConstants.STYLE_IMAGE];

  }

  return null;

}

Editors 编辑器

var config = mxUtils.load('editors/config/keyhandler-commons.xml').getDocumentElement();

var editor = new mxEditor(config);

CSS

可以通过mxClient.link('stylesheet', filename)或者表单标签来配置编辑器。例：

<mxEditor>

  <ui>

    <stylesheet name="examples/editors/css/process.css"/>

    ...

<add as="symbol">

  <Symbol label="Symbol" customAttribute="whatever">

    <mxCell vertex="1" connectable="1" style="symbol;image=images/event.png">    

      <mxGeometry as="geometry" width="32" height="32"/>

    </mxCell>

    <CustomChild customAttribute="whatever"/>

  </Symbol>

</add>

Toolbar

<add as="symbolTool" template="symbol"

  style="symbol;image=wf/images/bpmn/special_event.png"

  icon="wf/images/bpmn/small_event.gif"/>

Input/Output 输入/输出

var object = new Object();

object.myBool = true;

object.myObject = new Object();

object.myObject.name = 'Test';

object.myArray = ['a', ['b', 'c'], 'd'];

编码这个对象并以XML格式在新的window中显示结果的方法如下：

var encoder = new mxCodec();

var node = encoder.encode(object);

mxUtils.popup(mxUtils.getXml(node));

And here is the XML structure that represents the object:

以下是XML格式的显示结果：

<Object myBool="1">

  <Object name="Test" as="myObject"/>

  <Array as="myArray">

    <add value="a"/>

    <Array>

      <add value="b"/>

      <add value="c"/>

    </Array>

    <add value="d"/>

  </Array>

</Object>

注：编码器会将布尔型转换成数字型，属性值不存储数字或非对象。并且通过XML中的include指令可实现包含其他XML文件。

Files 文件

Post

<?php

$xml = $HTTP_POST_VARS['xml'];

if ($xml != null) {

  $fh=fopen("diagram.xml","w");

  fputs($fh, stripslashes($xml));

  fclose($fh);

}

?>

如下，发送URL请求改变mxEditor的各自项的配置文件。

<mxEditor urlPost="http://www.example.com/server.php" ... >