Integrating Web Sequence Diagrams with other services

IETF Task Force

Confluence

Mediawiki

Eclipse

Emacs

Maven

Trac

XWiki

DocuWiki

Wordpress

Mingle

MoinMoin

node.js

Chrome Browser

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

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.

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

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:

• default
• earth
• magazine
• modern-blue
• mscgen
• napkin
• omegapple
• patent
• qsd
• rose
• roundgreen

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

Opening directly from a URL

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

{"img": "?png=mscKTO107", "errors": []}
                

{"img": "?svg=mscKTO107", "errors": []}
                

• img: When appended to "https://www.websequencediagrams.com/", the result is the URL of the image.
• errors: an array of errors in the source text, if there were any.

Authentication and Premium Features

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.

// Creates an image on www.websequencediagrams.com and returns the url of the image. // This image must be retrieved within 2 minutes. function get_sequence_diagram($args) { $params = array(); foreach ($args as $key => $value ) { $params[] = urlencode($key) . "=" . urlencode($value); } $ch = curl_init("https://www.websequencediagrams.com"); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, implode("&", $params)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); curl_close($ch); $json = json_decode($response); return "https://www.websequencediagrams.com/" . $json->img; } // If you have an API key, you may also include it as a parameter. // This will allow you to create diagrams with premium features. $imageUrl = get_sequence_diagram(array( "apiVersion" => "1", "message" => " Alice->bob: hello", "style" => "omegapple", "format" => "png", // "apikey" => "OPTIONAL API KEY HERE" ));

import urllib import re def getSequenceDiagram( text, outputFile, style = 'default' ): request = {} request["message"] = text request["style"] = style request["apiVersion"] = "1" url = urllib.urlencode(request) f = urllib.urlopen("https://www.websequencediagrams.com/", url) line = f.readline() f.close() expr = re.compile("(\?(img|pdf|png|svg)=[a-zA-Z0-9]+)") m = expr.search(line) if m == None: print "Invalid response from server." return False urllib.urlretrieve("https://www.websequencediagrams.com/" + m.group(0), outputFile ) return True style = "qsd" text = "alice->bob: authentication request\nbob-->alice: response" pngFile = "out.png" getSequenceDiagram( text, pngFile, style )

import java.io.*; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import java.net.URLEncoder; public class Main { public void getSequenceDiagram( String text, String outFile, String style ) { try { //Build parameter string String data = "style=" + style + "&message=" + URLEncoder.encode( text, "UTF-8" ) + "&apiVersion=1"; // Send the request URL url = new URL("https://www.websequencediagrams.com"); URLConnection conn = url.openConnection(); conn.setDoOutput(true); OutputStreamWriter writer = new OutputStreamWriter( conn.getOutputStream()); //write parameters writer.write(data); writer.flush(); // Get the response StringBuffer answer = new StringBuffer(); BufferedReader reader = new BufferedReader(new InputStreamReader( conn.getInputStream())); String line; while ((line = reader.readLine()) != null) { answer.append(line); } writer.close(); reader.close(); String json = answer.toString(); int start = json.indexOf( "?png=" ); int end = json.indexOf( "\"", start ); url = new URL( "https://www.websequencediagrams.com/" + json.substring(start, end) ); OutputStream out = new BufferedOutputStream( new FileOutputStream( outFile )); InputStream in = url.openConnection().getInputStream(); byte[] buffer = new byte[1024]; int numRead; long numWritten = 0; while((numRead = in.read(buffer)) != -1 ) { out.write( buffer, 0, numRead ); numWritten += numRead; } in.close(); out.close(); } catch (MalformedURLException ex) { ex.printStackTrace(); } catch (IOException ex) { ex.printStackTrace(); } } public static void main(String[] args) { new Main().getSequenceDiagram("a->b:hello", "out.png", "qsd"); } }

/// <summary> /// Given a WSD description, produces a sequence diagram PNG. /// </summary> /// This method uses the WebSequenceDiagrams.com public API to query an image and stored in a local /// temporary directory on the file system. /// /// You can easily change it to return the stream to the image requested instead of a file. /// /// To invoke it: /// .. /// using System.Web; /// ... /// /// string fileName = grabSequenceDiagram("a->b: Hello", "qsd", "png"); /// .. /// /// You need to add the assembly "System.Web" to your reference list (that by default is not /// added to new projects) /// /// Questions / suggestions: fabriziobertocci@gmail.com /// /// <param name="wsd">The web sequence diagram description text</param> /// <param name="style">One of the valid styles for the diagram</param> /// <param name="format">The output format requested. Must be one of the valid format supported</param> /// <returns>The full path of the downloaded image</returns> /// <exception cref="Exception">If an error occurred during the request</exception> private static string GrabSequenceDiagram(String wsd, String style, String format) { // Websequence diagram API: // prepare a POST body containing the required properties StringBuilder sb = new StringBuilder("style="); sb.Append(style).Append("&apiVersion=1&format=").Append(format).Append("&message="); sb.Append(System.Web.HttpUtility.UrlEncode(wsd)); byte[] postBytes = Encoding.ASCII.GetBytes(sb.ToString()); // Typical Microsoft crap here: the HttpWebRequest by default always append the header // "Expect: 100-Continue" // to every request. Some web servers (including www.websequencediagrams.com) chockes on that // and respond with a 417 error. // Disable it permanently: System.Net.ServicePointManager.Expect100Continue = false; // set up request object System.Net.HttpWebRequest request; // The following command might throw UriFormatException request = System.Net.WebRequest.Create("https://www.websequencediagrams.com/index.php") as System.Net.HttpWebRequest; request.Method = "POST"; request.ContentType = "application/x-www-form-urlencoded"; request.ContentLength = postBytes.Length; // add post data to request System.IO.Stream postStream = request.GetRequestStream(); postStream.Write(postBytes, 0, postBytes.Length); postStream.Close(); System.Net.HttpWebResponse response = request.GetResponse() as System.Net.HttpWebResponse; if (response.StatusCode != System.Net.HttpStatusCode.OK) { throw new Exception("Unexpected HTTP status from server: " + response.StatusCode + ": " + response.StatusDescription); } System.IO.StreamReader stream = new System.IO.StreamReader(response.GetResponseStream()); String jsonObject = stream.ReadToEnd(); stream.Close(); // Expect response like this one: {"img": "?png=mscKTO107", "errors": []} // Instead of using a full JSON parser, do a simple parsing of the response String [] components = jsonObject.Split('"'); // Ensure component #1 is 'img': if (components[1].Equals("img") == false) { throw new Exception("Error parsing response from server: " + jsonObject); } String uri = components[3]; // Now download the image request = System.Net.WebRequest.Create("https://www.websequencediagrams.com/" + uri) as System.Net.HttpWebRequest; request.Method = "GET"; response = request.GetResponse() as System.Net.HttpWebResponse; if (response.StatusCode != System.Net.HttpStatusCode.OK) { throw new Exception("Server reported HTTP error during image fetch: " + response.StatusCode + ": " + response.StatusDescription); } try { System.IO.Stream srcStream = response.GetResponseStream(); string fileName = System.IO.Path.GetTempFileName(); System.IO.FileStream dstStream = new System.IO.FileStream(fileName, System.IO.FileMode.Create); // Copy streams byte[] buffer = new byte[1024]; int read; while ((read = srcStream.Read(buffer, 0, buffer.Length)) > 0) { dstStream.Write(buffer, 0, read); } dstStream.Close(); srcStream.Close(); return fileName; } catch(Exception e) { throw new Exception("Exception while saving image to temp file: " + e.Message); } }

#! /usr/bin/env ruby # frozen_string_literal: true # Use this to download web sequence diagram images. require 'net/http' require 'json' require 'uri' require 'open-uri' require 'optparse' options = { apiVersion: 1, format: 'png', style: 'modern-blue' } open_after = false OptionParser.new do |opts| opts.banner = "Usage: #{File.basename($PROGRAM_NAME)} [options] [source]" opts.on('-O', '--[no-]open', 'Open the image after downloading') do |o| open_after = o end opts.on('-K', '--api-key KEY', 'Specify the premium API key') do |k| options[:apikey] = k end opts.on('-S', '--style STYlE', 'Specify an alternate style') do |s| options[:style] = s end opts.on('-F', '--format FORMAT', 'Specify an alternate format') do |f| options[:format] = f end opts.on('-Q', '--high-quality', 'Requests High-Quality format (premium)') do |w| options[:scale] = 200 end opts.on('-h', '--help', 'Print this help') do puts opts exit 0 end end.parse!(ARGV) text, file = if ARGV[0] && $stdout.tty? if File.exist?(ARGV[0]) [File.read(ARGV[0]), File.basename(ARGV[0])] else [open(ARGV[0], 'Accept' => 'text/plain').read, File.basename(ARGV[0])] end else [readlines.join, nil] end API = URI.parse('https://www.websequencediagrams.com/index.php') options.delete(:scale) unless options[:format] == 'png' && options[:apikey] p options options.update(message: text) response = Net::HTTP.post_form(API, options) unless response.kind_of?(Net::HTTPOK) warn "Error from server #{response.inspect}." exit 1 end begin body = JSON.parse!(response.body) img = body['img'] if img && img =~ /\?(png|pdf|svg)=(.+)/ file = Regexp.last_match(2) if file.nil? file = "#{file}.#{Regexp.last_match(1)}" url = "https://www.websequencediagrams.com/#{img}" File.open(file, 'w+') { |f| f << open(url).read } if open_after warn "Opening #{url}" case RUBY_PLATFORM when /linux/i system("xdg-open file://#{Dir.getwd}/#{file}") else system("open #{file}") end end end rescue errors = JSON.parse!(response.body(/errors: (\[.+\])/)) p errors end