Online Diagramming

Free online command driven diagramming (flowchart, sequence diagrams). Type commands and see diagram instantly. You can download SVG diagram when it’s ready or share it.

  • Syntax reference
  • Syntax highlighting
  • Error checking
  • Easy style changing



Request a special discount

You can request a discount that you want by sending us a form below. Ask for a fair price!

We will send you a coupon code as soon as possible.


No Fields Found.

How to make a clean install

How to make a clean install

If you have a problem with updating previous version, please, close the app and remove the following files and folders if they exist on your computer:
~/Library/Containers/ru.DeepIT.Diagrammix
~/Library/Application Support/Diagrammix
~/Library/Preferences/ru.DeepIT.Diagrammix.plist
~/Library/Saved Application State/ru.DeepIT.Diagrammix.savedState

You can reach those items using Finder > menu Go > “Go to folder”, copy and paste each path above.

If you have imported stencils copy and save files from
~/Library/Containers/ru.DeepIT.Diagrammix/Data/Library/Application Support/Diagrammix/Notations/Imported
or
~/Library/Application Support/Diagrammix/Notations/Imported
(if it exists)
before removing the folders above or repeat importing.

Sometimes restart of cfprefsd process is required. Run Activity monitor, filter lines for cfprefsd and finish them all. It will be relaunched automatically.

cfprefsd

Then restart the app.

Sequence diagram commands for command driven diagramming

Create a document with “Command drive” style and type commands into the field. Then click “Build” button or press a shortcut Cmd+R. You can add additional shapes from the palette which will be preserved after rebuild.

Participants
sequenceDiagram
	    participant John
	    participant Alice
	    Alice->>John: Hello John, how are you?
	    John-->>Alice: Great!
The participants can be defined implicitly as in the first example on this page. The participants or actors are rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a different order than how they appear in the first message. It is possible to specify the actor’s order of appearance by doing the following:
Messages
[Actor][Arrow][Actor]:Message text
Messages can be of two displayed either solid or with a dotted line. There are six types of arrows currently supported:
->
which will render a solid line without arrow
Alice->John: Hello John, how are you?
–>
which will render a dotted line without arrow
Alice-->John: Hello John, how are you?
->>
which will render a solid line with arrowhead
Alice->>John: Hello John, how are you?
–>>
which will render a dotted line with arrowhead
Alice-->>John: Hello John, how are you?
-x
which will render a solid line with a cross at the end (async)
Alice-xJohn: Hello John, how are you?
–x
which will render a dotted line with a cross at the end (async)
Alice--xJohn: Hello John, how are you?
Notes
Note [ right | left ] of [Actor]: Text in note content
sequenceDiagram
	    participant John
	    Note right of John: Text in note
It is possible to add notes to a sequence diagram. This is done by the notation Note [ right | left ] of [Actor]: Text in note content
Loops
loop Loop text
	... statements ...
	end
sequenceDiagram
	    Alice->John: Hello John, how are you?
	    loop Reply every minute
	        John-->Alice: Great!
	    end
Alt
alt Describing text
	... statements ...
	else
	... statements ...
	end
or if there is sequence that is optionat (if without else).
opt Describing text
	... statements ...
	end
sequenceDiagram
	      Alice->>Bob: Hello Bob, how are you?
	        alt is sick
	            Bob->>Alice: Not so good :(
	        else is well
	            Bob->>Alice: Feeling fresh like a daisy
	        end
	        opt Extra response
	            Bob->>Alice: Thanks for asking
	        end

Flowchart commands for command driven diagramming

Create a document with “Command drive” style and type commands into the field. Then click “Build” button or press a shortcut Cmd+R. You can add additional shapes from the palette which will be preserved after rebuild.

Graph
graph TD
This statement declares a new graph and the direction of the graph layout.
  • TB – top bottom
  • BT – bottom top
  • RL – right left
  • LR – left right
  • TD – same as TB
	graph TB;
	    A-->B;
	    A-->C;
	    B-->D;
	    C-->D;
	graph LR;
	    A-->B;
	    A-->C;
	    B-->D;
	    C-->D;
A node (default)
id1
graph TB;
    A
A node with text
id1[This is the text in the box]
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box.
graph TB;
    A[This is the text in the box]
A node with round edges
id1(This is the text in the box);
graph TB;
    A(This is the text in the box)
A node in the form of a circle
id1((This is the text in the circle));
graph TB;
    A((This is the text in the circle))
A node in an asymetric shape
id1>This is the text in the box]
graph TB;
    A>This is the text in the box]
A node (rhombus)
id1{This is the text in the box}
graph TB;
    A{This is the text in the box}
A link with arrow head
A–>B
graph TB;
    A-->B
An open link
A — B
graph TB;
    A---B
Text on links
A– This is the text — B
or
A—|This is the text|B;
graph TB;
    A-- This is the text --- B
Dotted link
-.->
graph TB;
    A-.->B
Dotted link with text
-. text .->
graph TB;
    A-. text .->B
Thick link
==>
graph TB;
    A==>B
Thick link with text
== text ==>
graph TB;
    A== text ==>B
Subgraphs
subgraph title
graph definition
end
graph TB
        subgraph subsystem one
        a1-->a2
        end
        subgraph subsystem two
        b1-->b2
        end
        subgraph subsystem three
        c1-->c2
        end
        c1-->a2
Styling links
linkStyle 3 stroke:#ff3,stroke-width:4px;
It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. Instead of ids, the order number (starting from 0) of when the link was defined in the graph is used. In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph
graph LR
    id1(Start)-->id2(Stop);
    linkStyle 0 stroke:#ff0000,stroke-width:4px;
Styling a node
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px;
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;