Back to websequencediagrams.com

Integrating Web Sequence Diagrams with other services

Community plugins

Websequencediagrams is thrilled to have the support of the community with these plugins. If you are interested in creating your own plugins, see below for information on our easy to use RESTful API.

IETF Task Force

If you are writing a HTML RFC document, WebSequenceDiagrams is the recommended format for sequence diagrams.

Confluence

Have an administrator install this plugin and then you will be able to embed sequence diagrams using the {uml-sequence} macro.

Mediawiki

With a one-line change to your installation of Mediawiki, you can keep your sequence diagrams in your wiki page's version history. Install the plugin from here.

Eclipse

Create sequence diagrams from inside the eclipse IDE. Simply install the plugin for Eclipse.

Emacs

Add an awesome sequence diagrams major mode to emacs with this package. You can install it with one command.

Maven

Use this plugin to generate sequence diagrams using the Maven build tool. See the example instructions and POM file.

Trac

Download the plugin for Trac, whipped together by Carl Gould. See the README file for easy instructions on installing it.

XWiki

Here is a Macro for XWiki.

DocuWiki

This plugin juses the service to generate nice UML Sequence Diagrams on DokuWiki pages.

Wordpress

Type diagrams directly into your posts with this plugin.

Mingle

This Mingle macro plugin helps users draw sequence diagrams in their Mingle wiki pages.

MoinMoin

Here is a plugin for the MoinMoin wiki engine, sent in by customer James Goldwater.

node.js

Install the node-websequencediagrams plugin to render diagrams in your server-side web application.

Chrome Browser

This plugin will add a button to create sequence diagrams right in the javascript console.

Are you using websequencediagrams.com with some other service? Let us know and we'll post it here.

See below for command line interfaces in PHP, Python, Ruby, Java, and C#.

HTML and Web Pages

You can include diagrams in any web page, and they automatically update when the page changes. Just copy these two lines, and put your diagram source text between them.

Do not remove the <pre> tags. They are required to preserve line-breaks on some browsers.

Example

<div class=wsd wsd-style="modern-blue" ><pre>

Alice->Bob: Authentication Request
Bob-->Alice: Authentication Response

</pre></div><script type="text/javascript" src="$HOSTURL/service.js"></script>
                

                Alice->Bob: Authentication Request
                Bob-->Alice: Authentication Response
                

You can set wsd-style to any of these styles:

You may also set the maximum width to a pixel value using the wsd-width attribute.

Opening directly from a URL

You can use the m parameter to specify the diagram description in the URL when linking to the web site.

$HOSTURL/?m=note%20over%20a:%20you%20can%20link%20to%20this

Integrating with other services through the REST API

You can access the websequencediagrams server programmatically using a HTTP POST request. Send the POST request to https://www.websequencediagrams.com/index.php. The request must contain "style" parameter, containing the name of the style to use. The "message" parameter contains the text of the diagram. The apiVersion parameter should contain the value "1". The "format" parameter may be "png", "pdf", or "svg". In response to the POST request, websequencediagrams.com will return a string similar to the following:
{"img": "?png=mscKTO107", "errors": []}
                
In the case of an svg request, the response would be:
{"img": "?svg=mscKTO107", "errors": []}
                
The response is a JSON encoding of the following fields: The image may be deleted from the server immediately after it is accessed. To access the image again, you will have to regenerate it using a separate POST request.

Authentication and Premium Features

Subscribers can use an API key to access premium features through the API.
  1. Generate an API key by visiting this page while signed in.
  2. Include the "apikey" parameter in requests, with its value equal to your key.

Please note that subscriptions are for individual users to create diagrams. Requests that appear to be for multiple users may result in cancellation of the account.

Rust API

There is a Rust API available at https://crates.io/crates/wsdclient

PHP API

Here is an example implementation in PHP. If you have an API key (see above), then you can include it in the request to access premium features.

Python API

Here is an example implementation in python.

Java API

Here is an example implementation in Java.

C# API

Here is some sample C# code sent in by Fabrizio Bertocci.

Ruby API

Here is an example implementation in Ruby.

Rust API

There is a Rust API available at https://crates.io/crates/wsdclient