Sample sequence diagram.cm
SEQ
Saved locally
New Flowchart
Your charts will be saved in your browser, so they should be here the next time (unless you clear your browser's cache).
New Sequence Diagram
Your charts will be saved in your browser, so they should be here the next time (unless you clear your browser's cache).
My Charts
Your charts are saved in your browser. If you clear your browser's cache, they will be lost.
Delete Confirmation
Are you sure you want to delete ?
About Chart Mage
Chart Mage is a tool for drawing sequence diagrams and flowcharts based on a simple syntax, in a similar manner as markdown.
Chart Mage was created by Junlin Shang.
Many thanks to the cool projects mermaid, Codemirror, Underscore, node-uuid, jQuery Modal, base16. Chart Mage was made possible by them.
If you have any thought about Chart Mage, feel free to contact me.
Chart Not Found
The chart you asked for is missing. This is probably caused by clearance of browser's localStorage.
Please refresh the page to continue.
Magic Spells for Flowchart
Rounded Rectangle
((Enclosing text with double parenthesis))
Rectangle
Just type the text
Rhombus
Would you please leave a question mark at the end?
Solid Line with Arrowhead
->>
Solid Line with Arrowhead and text
- some text ->>
Dotted Line with Arrowhead
-->>
Dotted Line with Arrowhead and text
-- some text -->>
Subgraph
subgraph title
graph definition
end
Magic Spells for Sequence Diagram
Participant
You don't have to include the participant lines. But by doing so you can explicitly specify the actor's order of appearance.
participant Alice
Message
[Actor][Arrow][Actor]: Message Text
Solid Line with Arrowhead
->>
Dotted Line with Arrowhead
-->>
Solid Line with A Cross at The End
-x
Dotted Line with A Cross at The End
--x
Activation
Alice ->>+ John: Activate
John -->>- Alice: Dedicated
Loop Fragment
loop Loop Title
Alice ->> John: How you doing?
John -->> Alice: Fine. How you doing?
end
Alt Fragment
Alice->>John: Hello John, how are you?
alt is sick
John->>Alice: Not so good :(
else is well
John->>Alice: Feeling fresh like a daisy
end
Opt Fragment
opt Extra response
John->>Alice: Thanks for asking
end
Note
You can add notes by the notation:
Note [ right of | left of | over ] [Actor]: Text in note content
Note right of John: Text in note
You can also create notes spanning two participants:
Note over Alice, John: Text in note
Unable to download flowchart
This is restricted by your browser, please use the latest version of Chrome or Firefox.
Unable to download the diagram
This is restricted by your browser, please use the latest version of Chrome or Firefox.