Saved Diagrams:
Reload Selection
Delete Selection
Save Diagram to Browser
Download SVG
Download Text
----options margin:10 <w>(nodeColor:#CCCCFF,shape:note,margin:20,fontSize:20) ----graph w[Welcome to the Editor!] 1[This is a simple editor for Box-n-Weave.js.] 1->2[You can create diagrams by typing in the text area below] 1->3[You can save and load diagrams from your browser ]->4[save a diagram by typing a name in the text box and clicking the save button]->5[it'll then appear in the dropdown list, where you can load it back in] 1->6[There's a GUI for setting options below the text area]->7[Just expand the Options GUI section to see it] ----clusters {1,2,3,4,5,6,7}
Options GUI
Node Settings
nodeGap:
The space between nodes.
nodeCornerRadius:
The radius of the corners of the nodes.
shape:
The shape of the nodes.
Rect
Ellipse
Pill
Cylinder
Diamond
User
Stack
nodeColor:
The color of the nodes.
or
None
nodeBorder:
The width of the node borders.
nodeBorderColor:
The color of the node borders.
or
None
shapeWidth:
The max width of the node shapes.
shapeHeight:
The max height of the node shapes.
offsetX:
The x offset of the node labels.
offsetY:
The y offset of the node labels.
margin:
The margin around the text in the nodes.
Edge Settings
edgeGap:
The space between edges.
edgeColor:
The color of the edges.
or
None
edgeWidth:
The width of the edges.
edgeOpacity:
The opacity of the edges.
edgeFontSize:
The size of the font for edge labels. 0 means auto
squareEdges:
Whether the edges should be square or slanted.
edgeCornerRadius:
The radius of the corners of the edges. (only for square edges)
Cluster Settings
clusterGap:
The space between clusters.
clusterCornerRadius:
The radius of the corners of the clusters.
clusterBorderColor:
The color of the cluster borders.
or
None
clusterBorder:
The width of the cluster borders.
clusterColor:
The color of the clusters.
or
None
clusterOpacity:
The opacity of the cluster background
clusterFontSize:
The size of the font for cluster labels. 0 means auto
General Settings
rankGap:
The space between ranks.
rankDirection:
The direction of the ranks.
Top to Bottom
Bottom to Top
Left to Right
Right to Left
lineDividers:
Whether to show line dividers.
lineSpacing:
The spacing between lines.
arrowSize:
The size of the arrows.
fontColor:
The color of the font.
fontSize:
The size of the font. 0 means auto
boldFirstLine:
Whether to bold the first line of each text. Useful for titles.
autoWrapLength:
The length at which text will automatically wrap.
showIds:
Whether to show IDs.
graphBorder:
Enable or disable the graph border.
graphBorderColor:
Set the color of the graph border.
or
None
graphCornerRadius:
Set the corner radius of the graph border.
graphBackgroundColor:
Set the background color of the graph.
or
None
maxNodesPerRank:
The maximum number of nodes per rank.
Animation
animateSpeed:
How long each animation step takes, in seconds.
animateMode:
Can be 'loop', 'once', 'step', or 'step-loop'
Loop
Once
Step
Step Loop
animateDotSize:
The size of the dots that travel along the edges, in pixels.
animateDotColor:
The color of the dots that travel along the edges.
or
None
animateDotOpacity:
The opacity of the dots that travel along the edges.
animateFixedOpacity:
Turn off the opacity animation.