通過上一節 MxGraph從入門到精通之2：HelloWorld程序解析，我們已經知道通過MxGraph繪製圖形的核心步驟，繪製出來的圖形默認的樣式如下：
我們可以修改默認樣式來修改所有圖形的默認樣式，也可以在創建節點的時候通過參數來創建指定樣式的節點或者調用graph的setCellStyle來更新指定節點的樣式。
修改默認樣式
修改頂點(Vertex)的默認樣式
let style = graph.stylesheet.getDefaultVertexStyle(); // 獲取頂點的默認樣式，得到一個對象
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; // 將頂點的默認形狀改爲橢圓形
style對象中的各個屬性指定了頂點的形狀、顏色等默認樣式，其中mxConstants.STYLE_SHAPE屬性用於設置頂點的形狀，mxConstants.SHAPE_ELLIPSE形狀爲橢圓形。 mxConstants是MxGraph預定義的一系列常量，其中一些常量就是用來定義樣式的屬性和值的，大部分都已經常用的和樣式有關的常量可以參考本文最後的常用樣式彙總。修改默認頂點樣式後，上述的helloworld程序顯示效果如下：
修改邊(Edge)的默認樣式
和頂點類似，可以通過以下方式修改邊的默認樣式：
let style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = 'Green';
mxConstants.STYLE_STROKECOLOR表示邊的顏色，上述代碼表示將邊的默認顏色修改成綠色。在MxGraph中，顏色的取值範圍可以是HTML顏色名(如Red,Pink等)或十六進制碼(如#0000ff)。常用HTML顏色名可參考：HTML Color Codes 。修改邊的默認樣式後，上述的helloworld程序顯示效果如下：
設置節點樣式
創建指定樣式的節點
在上一節中helloworld示例程序插入頂點的方法可以傳入第八個參數，來指定創建出來的頂點的樣式，如下：
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'shape=cloud;fillColor=Coral');
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, 'shape=rhombus;fillColor=#00ff00' );
效果類似下圖：
更新已有節點樣式
setCellStyle可以更新一組節點的樣式，如下：
graph.setCellStyle('shape=cloud;fillColor=Gray', [v1,v2])
v1,v2爲我們上面創建的兩個頂點，上述代碼將v1,v2的樣式都設置成了灰色以及雲狀，效果類似下圖：
常用樣式彙總
通過上述示例我們知道MxGraph圖形的樣式設置實際上是通過一個包含多個鍵值對的字符串或者通過style對象來指定的，字符串中的鍵/值和style對象中的屬性/值是一一對應的。例如，shape=cloud 的作用類似於 style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CLOUD，實際上mxConstants.STYLE_SHAPE常量的值就是shape, mxConstants.SHAPE_CLOUD的值就是cloud。
上述示例演示了shape,fillColor等樣式的效果，下面總結一下常用的樣式類型及其取值範圍，出於方便，下面有些地方使用了常量的形式，有些地方使用了字符串的形式，這些常量和字符串的對應關係可以參考：MxGraph全局常量
mxConstants.STYLE_SHAPE - 形狀
mxConstants.STYLE_SHAPE用於指定MxGrape圖形的形狀，可取的值如下：
rectangle ellipse doubleEllipse rhombus line image arrow
arrowConnector label cylinder swimlane connector actor triangle hexagon
各個形狀的效果如下：
mxConstants.STYLE_FONTSTYLE - 字體樣式
mxConstants.STYLE_FONTSTYLE用於設置字體的樣式，可取的值爲：
FONT_BOLD // 粗體
FONT_ITALIC // 斜體
FONT_UNDERLINE // 下劃線
FONT_STRIKETHROUGH // 中劃線
樣式效果如下：
mxConstants.STYLE_FILLCOLOR - 填充顏色
mxConstants.STYLE_FILLCOLOR指定圖形的填充顏色，值可以是HTML顏色名(如Red,Pink等)或十六進制碼(如#0000ff)。常用HTML顏色名可參考：HTML Color Codes
mxConstants.STYLE_STROKECOLOR - 畫筆顏色
mxConstants.STYLE_STROKECOLOR指定了畫筆的顏色。用於設置Edge和Vertex的外圍邊的顏色。
mxConstants.STYLE_FONTCOLOR - 字體顏色
mxConstants.STYLE_FONTCOLOR用於設置字體的顏色，style[mxConstants.STYLE_FONTCOLOR] = 'white'的效果如下：
mxConstants.STYLE_GRADIENTCOLOR - 漸變顏色
mxConstants.STYLE_GRADIENTCOLOR用於設置漸變顏色，style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'的效果如下：
mxConstants.STYLE_SHADOW - 陰影效果
mxConstants.STYLE_SHADOW用於指定是否開啓陰影效果，默認爲false，style[mxConstants.STYLE_SHADOW] = true的效果如下：
