Device not supported, use firefox or chrome or safari or ie 10+
Device not supported, use firefox or chrome or safari or ie 10+
Current Version: 4.4.0
© SequenceDiagram.org
Legacy version

INSTRUCTIONS

Title
  • The title is displayed at the top of the diagram
  • The title is also used as the file name when theicons are clicked
Participants
  • New particpants may be added by clicking the icon
  • Change the alias of a participant by double clicking it
  • A long displayed name can be written on form:
    • participant "some very\nlong name" as Alice
  • Delete a participant by clicking it and using the delete key
Messages
  • Messages are created by clicking and dragging in the diagram
    • Hold Shift before clicking for dashed line
    • Hold Ctrl before clicking for open arrow
    • Hold Shift+Ctrl before clicking for open arrow with dashed line
  • Edit the text of a message by double clicking it
  • Change the start and end participants of the message by clicking and dragging the start or end of the message
  • Change position of the message by clicking and dragging the middle of the message
  • Delete the message by clicking it and pressing the delete key
  • New line is create using \n
Notes and Boxes
  • Notes and boxes are created by right clicking in the diagram and selecting the wanted note / box entry from the menu
  • Edit the text of a note or box by double clicking it
  • Change the start and end participants of the "note or box over several participants" by clicking and dragging the start or end of the note or box
  • Change position of the note or box by clicking and dragging the middle of the note or box
    • Note: It is the bottom of the shapes that counts as the y position when dragging
  • Delete the note or box by clicking it and pressing the delete key
  • New line is create using \n
Divider
  • Dividers are created by right clicking in the diagram and selecting the ==divider== entry from the menu
  • Edit the text of a divider by double clicking it
  • Change position of the divider by clicking and dragging it
  • Delete the divider by clicking it and pressing the delete key
Fragments
  • Fragments are created by right clicking in the diagram and selecting the wanted fragment type from the menu
    • Since many possible fragments exists, only the most common are included in the menu, complete list: alt, opt, loop, par, break, critical, ref, seq, strict, neg, ignore, consider, assert, region
  • Edit the text of a fragment by double clicking the top of the fragment or its else part
  • Change inclusion of entries by clicking and dragging top, bottom, or else part of the fragment
  • You can also create new items directly inside the fragment
  • Delete the whole fragment (but keep the contents) by clicking the top or bottom of the fragment and pressing the delete key
  • Delete only the else (else is only supported inside the alt fragment) part by clicking the else divider and pressing delete key
Text Styling
  • Text in all entries can be styled
  • Bold text: **some bold text**
  • Italic text: //some italic text//
  • Small text: --some small text--
  • Big text: ++some big text++
  • Big and bold: ++**some big and bold text**++
  • Italic and small: //--italic and small--//
  • Use \ to escape wanted */-+ chars, examples: c\+\+ http:\/\/www.example.org
Color
  • Color is supported for most of the entries and use the HTML color names or hex
  • W3C provides a good list of color names: W3C color names
  • Examples: #ff00ff, #lightblue
Font
  • The font can be specified using the fontFamily keyword and the css name of the font
  • Specific font: fontFamily My Font Name
  • Browser selected sans-serif font: fontFamily sans-serif
  • Browser selected mono spaced font: fontFamily mono
Automatic Numbering
  • The autonumber statement gives automatic number of subsequent messages
  • The autonumber off statement stops the numbering
  • Automatic numbering can be started at a specified number, example: autonumber 10
Linear Messages
  • The linear statement makes subsequent messages of the same type linear
  • The linear off statement stops linear
Parallel
  • The parallel statement simply puts subsequent entries at the same y position
  • The parallel off statement stops parallel
  • It is different from linear since it doesn't do any intelligent matching for different types of entries
Participant Spacing
  • Participant spacing allows control of spacing between the participants
  • The participantspacing equal statement makes the spacing between all participants equal
  • The participantspacing 50 statement makes the spacing between all participants at least 50
Entry Spacing
  • Entry spacing allows control of spacing between the entries
  • Click anywhere on the diagram and press the + or - key to change spacing between all entries
  • Add entryspacing statements to change in different places of the diagram

Click images to append the examples to the diagram, hover over images to see the example script

Right click and copy image or Save as...

ABOUT

SequenceDiagram.org is a completely free online tool for creating sequence diagrams. The graphic design is created by yusi.se.

All processing of parsing and painting the diagram is done using javascript client side in the user's web browser. This not only makes it snappy to work with, but it also means that your secrets are safe. Since no backend server is used it is also possible to use the web application offline.

There are many sequence diagram tools out there but this is the only one which allows you to:

In other words bringing the best from both worlds. This makes it very easy to work with large diagram where other similar tools struggle. It also doesn't have any ads or unnecessary distracting elements. (Even the top bar can be hidden to maximize the working area)

The source script of the diagrams can be save as text files directly to your hard drive. There are also single click buttons to save the diagram in HQ png or LQ jpeg format. The size of the image depends on the current zoom level.

If you want to share a diagram with others there is a URL share button available. It creates a link containing all the data of the diagram and can be sent to others so that they can view your diagram or keep working where you left off.

The tool is developed and maintained by people who create a lot of sequence diagrams in their daily work and from efficiency point of view weren't 100% satisfied with the existing tools.

If you have any question/comments/suggestions/bugs please contact info@sequencediagram.org

FAQ

Are diagrams stored in any way or sent to any server by SequenceDiagram.org?

If you use the share URL button and someone clicks on your link, the data in the URL will be visible in the http access logs. Otherwise no, since all parsing and drawing of diagrams is executed solely on the client side in your browser.


Are diagrams/scripts created using SequenceDiagram.org covered by any license?

No license is imposed by SequenceDiagram.org itself. However, like with all images containing text, the font you chose to use might, depending on how you plan to use the image. The default font used in diagrams is the default sans-serif font selected by your browser. You can specify a different font using the fontFamily keyword, see help for more information.


Is the code base of SequenceDiagram.org itself open source?

The code base is currently not available under any open source license. This is unlikely to be prioritized while there are still local developers who enjoy working on it :)


What libraries are used by SequenceDiagram.org?

Titled link to select and copy: sequence diagram link

 

 

Copy the above Titled link or Raw URL and share it