Create professional UML diagrams with ease. Use Visio to create Unified Modeling Language (UML) diagrams that visually represent business processes, software architecture, and much more. Craft robust UML diagrams. Document systems and solve problems. Get the latest Visio apps on the web and your desktop, and 2 GB of cloud storage on OneDrive. The entire UML sequence diagram can be drawn on the interface for free. Participants can be added and the picture can be zoomed in. The final diagram can be exported as a.png image. Sequence Diagram Editor Tool.

Uml Sequence Diagram Editor
Mermaid Sequence Diagram Editor
Sequence Diagram Editor Mac
Sequence Diagram Editor Online
Plantuml Sequence Diagram Editor

Introduction

Want to draw a Sequence Diagram?Go to the online editor.

Oct 25, 2016 Quick Sequence Diagram Editor. A fast and reliable tool, written in Java 8, for generating professional UML sequence diagrams from text. Supports actors, con-/destructors, threads, broadcasts, notes, and fragments. Can serve as a Javadoc taglet.
SequenceDiagram.org is an online tool / software for creating UML sequence diagrams. Founded in 2014 with the purpose to improve the efficiency when creating and working with sequence diagrams by combining text notation scripting and drawing by clicking and dragging in the same model.
Scruffy UML is a Python library which can render multiple types of UML diagram, including simple sequence diagrams, from the commandline. Uses yUML syntax rather than the human friendly syntax used by most other projects. PlantUML is a Java project and online editor which can render multiple types of UML diagram, including sequence diagrams.

This library renders sequence diagrams from code. It isopen-source(LGPL-3.0), and including it in a website is as simple as adding the script:

Or if you are using requirejs:

If you are using NPM to manage dependencies, you can install with npm install --save svg-sequence-diagram

Any element with the class sequence-diagram will automatically beconverted when the page loads:

Language

Connection Types

Dividers

Notes & State

Logic

Label Templates

Multiline Text

Themes

Available themes

basic
monospace
chunky
sketch
sketch left handed

Short-Lived Agents

Agent Aliases

Markdown

Alternative Agent Ordering

Agent Types

Asynchronous Communication

More features are supported. See theonline editor’s library and autocompletefeatures to discover them.

Browser Support

This has been tested in the latest versions of Google Chrome, Mozilla Firefox,and Apple Safari. Versions of Microsoft Internet Explorer / Edge have not beentested and probably won’t work. Any bugs found in a supported browsershould be reported in theIssue Tracker.

API

For more advanced usage, an API is available:

Constructor

Creates a new SequenceDiagram object. Options is an object which can contain:

code: Alternative way of specifying code, instead of using aseparate argument.
container: DOM node to append the diagram to (defaults tonull).
document: Document object to base the diagram in (defaults tocontainer's document, or window.document).
textSizerFactory: Function which returns an object capable ofmeasuring text (defaults to wrapping getComputedTextLength).
themes: List of themes to make available to the diagram(defaults to globally registered themes).
namespace: Each diagram on a page must have a unique namespace.By default a unique namespace is generated, but if you want something specific,enter it here.
interactive: If true, will automatically calladdInteractivity when constructing the diagram.

.clone

Creates a copy of the diagram. If options are given, they will override thecurrent diagram’s state (options is passed to the constructor of the newobject, so all the same options are available). Note that by default, thenamespace will not be cloned (a new unique namespace will begenerated). Also the container will not be cloned; you will needto specify one explicitly or manually attach the new diagram at a later point.

.set

Changes the code for the diagram and causes a re-render.

.process

Processes the given code but does not render it. Causes no change to thediagram object. This is mostly useful for debounced rendering with immediateerror notifications. The resulting object can be passed torender at a later point.

.render

Forces a re-render of the diagram. Typically this happens automatically.Optionally, the result of an earlier call toprocess can be provided.

.addTheme

Make a new theme available to the diagram. Any unrecognised themes are replacedwith the default theme.

The theme API has not been finalised yet, so this method is not typicallyuseful.

.getThemeNames

Returns a list of names of themes which are available to this diagram. Thesecan be specified in a theme <name> line in the code.

.getThemes

Returns a list of themes which are available to this diagram.

.addInteractivity

Makes the rendered diagram interactive. Currently this means adding a clicklistener to any groups which causes them to collapse / expand. Try clicking onthe example to the right.

The example here has CSS styling applied:

It is also possible to enable interactivity using a HTML attribute:

.getSVGSynchronous

Returns a blob URL which contains the SVG code for the current diagram.

The options can include:

size: Object containing optional width, height or zoom tospecify in the SVG.

.getSVG

Asynchronous version ofgetSVGSynchronous. This isprovided for compatibility with getPNG,which has no synchronous equivalent.

The options can include:

size: Object containing optional width, height or zoom tospecify in the SVG.

The callback receives an object containing:

url: The URL of the generated blob.
latest: True if the URL given is still valid; subsequent callsto this method will invalidate previous URLs.

.getPNG

Generates a PNG image and returns a blob URL.

The options can include:

resolution: Desired pixels-per-unit.
size: Object containing optional width, height or zoom torender the image at (defaults to the unit size of the diagram). The finaloutput will have size width * resolution ×height * resolution.

The callback receives an object containing:

url: The URL of the generated blob.
latest: True if the URL given is still valid; subsequent callsto this method will invalidate previous URLs.

.getSize

Returns an object containing width and heightproperties, corresponding to the size of the diagram in units.

.getTitle

Returns the document title as a string. All formatting is lost, andnewlines are replaced with spaces. Returns a blank string if no title is set.

.setContainer

Same as calling node.appendChild(diagram.dom()).

.dom

Returns the base SVG element which the diagram has been rendered into.

.setHighlight

Marks elements generated by the specified line with a 'focus' CSS class, w