⇓ Inputs : ' Type a list of Flows, like this: ' SOURCE [AMOUNT] TARGET ' Examples: Wages [2000] Budget Interest [25] Budget Budget [500] Taxes Budget [450] Housing Budget [310] Food Budget [205] Transportation Budget [400] Health Care Budget [160] Other Necessities ' After your Flows are entered, use the ' controls below to customize your ' diagram's appearance. ' For even finer control over presentation, ' see the Manual (linked above). Preview ⇑ Size, Spacing & Shape : Diagram Width: px Height: px Vertical Space between Nodes: px Node Width: px Curviness: | (

Margins: Top Bot L R ⇓ Colors ... Background Color: Transparent

Node Colors: Use theme: A B C

Use a single color:

Flow Colors:

Use the Source Node's color

Use the Target Node's color

Use a single color: Flow Opacity: 0.0 1.0 ⇓ Labels & Units ... Show labels (hide to apply your own text to the graph)

Show Node totals as part of labels

Always show full precision (best for currency)

Face: sans serif mono Size: px Color: Weight: Light Bold

Units: Prefix = Suffix = Number Format: 1,000,000.00 1.000.000,00 1 000 000.00 1 000 000,00 1000000.00 1000000,00 ⇓ Advanced ... Flow Cross-Check: Verify that the graph adds up.

Diagram Scale =

(For fair comparisons between diagrams, make their

Units and Scale match as closely as possible.) Note: You can drag Nodes around to reposition them

before export. (However, changing any inputs will

re-draw/reset the whole diagram.) Node Opacity: 0.0 1.0 Border: 0px 1px 2px 3px 4px 5px Reverse the graph (flow right-to-left) ⇑ Export Diagram : Once you are satisfied with your diagram, you can

export it as an image or as vector code (SVG): ⇓ PNG Image ... Scale: 1x (Basic) 2x (Retina) 4x (Print) ... Dimensions for IMG tag: ⇓ SVG Code ... (generating SVG code...) Copy the code above to embed your diagram. Save it in a “ .svg ” file to edit it in another application. Every Flow will have a tooltip when hovering.

⇓ Layout Options ... Force all flow origins to the left edge Force all flow endpoints to the right edge (Note: these options only apply to complex diagrams with 3 or more columns of nodes.)