About the editor

The editor saves your work automatically as you type. This happens locally, in your browser. The graphics are also regenerated automatically. The syntax of your diagram code is checked on-the-fly, and any errors will be shown to you. If no errors are found, the editor will highlight the syntax of your diagram.

To download the diagram source code, click the Save source button. To download the generated SVG files as a ZIP, click the Save output graphics button.

About the language

Copy the code examples below to the editor to show the output of each.

Multiple diagrams can be defined in a single file. Every diagram begins with the diagram directive, followed by one or more indented lines containing one directive each.

diagram a diagram b

A directive must define or reuse a node. This is done by defining the identifier of a node (highlighted in light orange). Optionally, a node can be given a type, which will affect its visual representation (square, round, triangle, rhombus, or arrow). Some of these types have a dashed variant, or are only availale as dashed. Access these by doubling the type symbol. If a type is given, a label can optionally also be added to the node. Finally, this label can be given emphasis if required.

diagram mySimpleNode mySquareNode[] myLabeledNode[Labeled Node] myEmphasizedNode[!Max] myDashedNode[[]] myRoundNode(Round Node) myEmphasizedDashedRoundNode((!A)) myRightTriangleNode>>>> myRightTriangleLabeledNode>>Label>> myLeftTriangleNode<A< myDashedRhombusNode{{!R}} myArrowNode%Buffer%

Nodes can be referred back to or overwritten by reusing their identifier.

diagram firstNode secondNode firstNode(With Label)

Nodes can be connected together using edges. Edges are defined by a source node and a destination node, a type and direction. Again, the type affects the visual representation of the edge. Optionally, additional information can be displayed on the edge by adding a label and/or graphic symbol at the start and/or end.

diagram firstNode(First Node) secondNode[!Big] firstNode => secondNode secondNode -> thirdNode[Look, dashed and looped!] thirdNode => thirdNode fourthNode[Type symbols can be...] *******> fifthNode[Repeated as many times as you want] sixthNode[Directionless] == seventhNode eighthNode[Backwards] <----- ninthNode tenthNode[Bidirectional] <*> eleventhNode diagram a =USB=> b c -Software-> d e *Wireless*> f g ===Repeat=====> h diagram i[Audio] |A|=> j k[Video] |V|=> l m[Data Stream] |D|=> n o[Event] |E|=> p q[Buffer] |B|=> r s[Spectral] |S|=> t diagram one[Combine a symbol with a types and a label] |A|<===Label===>|A| two[To make highly specific edges]

Comments can be added to any directive, and will be displayed in the diagram alongside the source node of that directive.

diagram foot((Left foot)) => pedal(Pedal) // Stomp very firmly

To control the origin or destination of an edge or to add additional information, ports can be defined on a node. A port is defined by appending a node with a . (period) and then an identifier for the port. Optionally, a label and symbol can be added, and the port can be made vertical (useful in the case of a trigger for a switch, for example). Port identifier can be reused to create multiple edges from or to a single port.

diagram nodeA[A].portA => nodeB[B].portA nodeA.portB => nodeC[C].portA nodeB.portB => nodeC.portB nodeB.portC => nodeC.portB diagram nodeA[A].portA[Port A] => nodeB nodeA.portB[Port B] => nodeB nodeB.outA[|D|Data Stream] => nodeC.param[|P|Parameter] nodeB => nodeC.enable[|E|Enable] nodeB => nodeC.trigger[|T|Trigger] diagram pedal(Foot Pedal) => gate[Gate].^trigger // Prepend port identifier with ^ input[Input] => gate gate => output<Speaker< Examples

Copy and paste these examples to see their output.

diagram source[Synthesizer] source.audioRight[R] |A|=Jack=> adc.right[|D|Right] source.audioLeft[L] |A|=Jack=> adc[ADC].left[|D|Left] adc |D|=USB=> switch[Switch] switch.left |D|=> destA<Left DAC< switch.both |D|=> destA switch.both |D|=> destB<Right DAC< switch.right |D|=> destB trigger(Foot Pedal).^out => switch.^trigger // Press down firmly diagram value[Accelerometer].x[|D|x] |D|-> bufferX%Buffer% value[Accelerometer].y[|D|y] |D|-> bufferY%Buffer% bufferX |B|==> filterX[Filter Accumulation] bufferY |B|==> filterY[Filter Smoothing] diagram leftHand((Ľavá ruka)) => slider(Gombík) // Pracovať pomaly zľava doprava value[!22] => max[!Max] slider |D|**> max max => delta[!Δ?] delta => result<V&yacute;sledok< diagram aa[Node A] bb{{Node B}} ==> aa.enable[|E|Enable] cc(Node C) <- aa.input[Out on left] dd>>Node D>> aa.output |A|**> dd // Gradual increase