Embed & Integrate

Add sequence diagrams to your web pages, docs, wikis, and CI pipelines in seconds — with a single script tag or a quick API call.

Quick Start

Embed in any Web Page

The primary and simplest way to include a diagram is direct URL embedding in an <img> tag. Use the source block method below when you want editable diagram text directly in page markup.

Direct URL Linking (Primary)

Use the cgi-bin/cdraw endpoint directly in an image source. This is the fastest way to embed diagrams in web pages.

HTML
<img src="https://www.websequencediagrams.com/cgi-bin/cdraw?s=modern-blue&m=Alice-%3EBob%3A%20Authentication%20Request%0ABob--%3EAlice%3A%20Authentication%20Response" alt="Sequence diagram" />

You can also link to the editor with the m parameter: $HOSTURL/?m=note%20over%20a:%20you%20can%20link%20to%20this

Inline Source Block (service.js)

Drop these lines into your HTML and your diagram renders automatically. Set wsd-style to any supported style, and optionally limit the width with wsd-width.

HTML
<div class="wsd" wsd-style="modern-blue"><pre> Alice->Bob: Authentication Request Bob-->Alice: Authentication Response </pre></div> <script src="https://www.websequencediagrams.com/service.js"></script>

Live Result

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

Available Styles

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

REST API

Generate diagrams programmatically with a simple HTTP POST to https://www.websequencediagrams.com/index.php.

Request Parameters

Response

A JSON object with the image path and any errors:

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

Prepend https://www.websequencediagrams.com/ to the img value to get the full image URL. The image may be deleted after first access; regenerate it with another POST if needed.

Premium API Keys Subscribers can generate an API key to access premium features (styles, PDF export, high-DPI) via the API.
Code Snippets

Generate Diagrams from Code

Pick your language below. Each snippet calls the REST API, saves the resulting image, and is ready to drop into your project.

Bash / cURL
#!/usr/bin/env bash # Generate a sequence diagram using the REST API. MESSAGE="Alice->Bob: Hello\nBob-->Alice: Hi there" STYLE="modern-blue" FORMAT="png" OUTPUT="diagram.png" # Step 1: request the diagram RESPONSE=$(curl -s --data-urlencode "message=title Authentication Sequence Alice.Bob: Authentication Request note right of Bob: Bob thinks about it Bob.Alice: Authentication Response " \ --data-urlencode "style=$STYLE" \ --data "apiVersion=1" \ --data "format=$FORMAT" \ "https://www.websequencediagrams.com/index.php") # Step 2: parse the image path from the JSON response IMG=$(echo "$RESPONSE" | sed -n 's/.*"img": *"\([^"]*\)".*/\1/p') if [ -z "$IMG" ]; then echo "Error: $RESPONSE" >&2 exit 1 fi # Step 3: download the image curl -s -o "$OUTPUT" "https://www.websequencediagrams.com/$IMG" echo "Saved to $OUTPUT"
Python 3
"""Generate a sequence diagram via the WebSequenceDiagrams API.""" import json import urllib.parse import urllib.request def get_sequence_diagram(text, output_file, style="default", fmt="png", api_key=None): """Fetch a diagram image and save it to output_file.""" params = { "message": text, "style": style, "apiVersion": "1", "format": fmt, } if api_key: params["apikey"] = api_key data = urllib.parse.urlencode(params).encode("utf-8") url = "https://www.websequencediagrams.com/index.php" with urllib.request.urlopen(url, data) as resp: body = json.loads(resp.read().decode("utf-8")) if "img" not in body: raise RuntimeError(f"Server error: {body}") img_url = "https://www.websequencediagrams.com/" + body["img"] urllib.request.urlretrieve(img_url, output_file) return output_file if __name__ == "__main__": diagram = "Alice->Bob: Authentication Request\nBob-->Alice: Response" get_sequence_diagram(diagram, "out.png", style="modern-blue") print("Saved to out.png")
Node.js
/** * Generate a sequence diagram via the WebSequenceDiagrams API. * Works with Node.js 18+ (built-in fetch). */ const fs = require("fs"); async function getSequenceDiagram(text, outputFile, style = "modern-blue", format = "png") { const params = new URLSearchParams({ message: text, style: style, apiVersion: "1", format: format, // apikey: "YOUR_PREMIUM_KEY", // uncomment for premium features }); // Step 1: request the diagram const res = await fetch("https://www.websequencediagrams.com/index.php", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: params.toString(), }); const json = await res.json(); if (!json.img) { throw new Error("Server error: " + JSON.stringify(json)); } // Step 2: download the image const imgRes = await fetch("https://www.websequencediagrams.com/" + json.img); const buffer = Buffer.from(await imgRes.arrayBuffer()); fs.writeFileSync(outputFile, buffer); return outputFile; } // Usage getSequenceDiagram( "Alice->Bob: Hello\nBob-->Alice: Hi there", "diagram.png" ).then((f) => console.log("Saved to", f));
TypeScript (Browser Fetch)
/** * Fetch a diagram image URL from the browser using the REST API. * Returns a blob URL you can assign to an <img> src. */ interface WsdResponse { img: string; errors: string[]; } async function getDiagramBlobUrl( message: string, style: string = "modern-blue", format: string = "png" ): Promise<string> { const params = new URLSearchParams({ message, style, apiVersion: "1", format, }); const res = await fetch("https://www.websequencediagrams.com/index.php", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: params.toString(), }); const json: WsdResponse = await res.json(); if (!json.img) { throw new Error(`Server error: ${JSON.stringify(json)}`); } const imgRes = await fetch( `https://www.websequencediagrams.com/${json.img}` ); const blob = await imgRes.blob(); return URL.createObjectURL(blob); } // Example usage getDiagramBlobUrl("Alice->Bob: Hello").then((url) => { const img = document.createElement("img"); img.src = url; document.body.appendChild(img); });
PHP
<?php /** * Generate a sequence diagram via the WebSequenceDiagrams API. */ function getSequenceDiagram(array $params): string { $postFields = http_build_query($params); $ch = curl_init("https://www.websequencediagrams.com/index.php"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $postFields); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); curl_close($ch); $json = json_decode($response, true); if (empty($json['img'])) { throw new RuntimeException("Server error: " . $response); } return "https://www.websequencediagrams.com/" . $json['img']; } // Usage $imageUrl = getSequenceDiagram([ "apiVersion" => "1", "message" => "Alice->Bob: Hello\nBob-->Alice: Hi", "style" => "modern-blue", "format" => "png", // "apikey" => "YOUR_PREMIUM_KEY", ]); // Download the image to a local file file_put_contents("diagram.png", file_get_contents($imageUrl)); echo "Saved to diagram.png\n";
Ruby
# frozen_string_literal: true # Generate a sequence diagram via the WebSequenceDiagrams API. require "net/http" require "json" require "uri" def get_sequence_diagram(text, output_file, style: "modern-blue", format: "png", api_key: nil) uri = URI("https://www.websequencediagrams.com/index.php") params = { "message" => text, "style" => style, "apiVersion" => "1", "format" => format } params["apikey"] = api_key if api_key response = Net::HTTP.post_form(uri, params) unless response.is_a?(Net::HTTPSuccess) raise "HTTP error: #{response.code} #{response.message}" end body = JSON.parse(response.body) raise "Server error: #{body}" unless body["img"] img_url = URI("https://www.websequencediagrams.com/#{body['img']}") img_data = Net::HTTP.get(img_url) File.binwrite(output_file, img_data) output_file end # Usage diagram = "Alice->Bob: Authentication Request\nBob-->Alice: Response" get_sequence_diagram(diagram, "diagram.png") puts "Saved to diagram.png"
Java 11+
import java.io.*; import java.net.URI; import java.net.URLEncoder; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; import java.nio.charset.StandardCharsets; import java.nio.file.Files; import java.nio.file.Path; public class WsdExample { public static Path getSequenceDiagram(String text, String outFile, String style, String format) throws Exception { String body = "apiVersion=1" + "&style=" + URLEncoder.encode(style, StandardCharsets.UTF_8) + "&format=" + URLEncoder.encode(format, StandardCharsets.UTF_8) + "&message=" + URLEncoder.encode(text, StandardCharsets.UTF_8); // + "&apikey=" + URLEncoder.encode("YOUR_KEY", StandardCharsets.UTF_8); HttpClient client = HttpClient.newHttpClient(); // Step 1: request the diagram HttpRequest req = HttpRequest.newBuilder() .uri(URI.create("https://www.websequencediagrams.com/index.php")) .header("Content-Type", "application/x-www-form-urlencoded") .POST(HttpRequest.BodyPublishers.ofString(body)) .build(); HttpResponse<String> res = client.send(req, HttpResponse.BodyHandlers.ofString()); // Simple JSON parsing (use a library for production code) String json = res.body(); int start = json.indexOf("\"img\""); int valStart = json.indexOf("\"", start + 5) + 1; int valEnd = json.indexOf("\"", valStart); String imgPath = json.substring(valStart, valEnd); // Step 2: download the image HttpRequest imgReq = HttpRequest.newBuilder() .uri(URI.create("https://www.websequencediagrams.com/" + imgPath)) .GET().build(); HttpResponse<byte[]> imgRes = client.send(imgReq, HttpResponse.BodyHandlers.ofByteArray()); Path target = Path.of(outFile); Files.write(target, imgRes.body()); return target; } public static void main(String[] args) throws Exception { getSequenceDiagram( "Alice->Bob: Hello\nBob-->Alice: Hi", "diagram.png", "modern-blue", "png" ); System.out.println("Saved to diagram.png"); } }
C# (.NET 6+)
using System.Text.Json; /// <summary> /// Generate a sequence diagram via the WebSequenceDiagrams API. /// </summary> class WsdExample { static async Task<string> GetSequenceDiagramAsync( string message, string outputFile, string style = "modern-blue", string format = "png", string? apiKey = null) { using var http = new HttpClient(); var form = new Dictionary<string, string> { ["apiVersion"] = "1", ["message"] = message, ["style"] = style, ["format"] = format, }; if (apiKey is not null) form["apikey"] = apiKey; // Step 1: request the diagram var res = await http.PostAsync( "https://www.websequencediagrams.com/index.php", new FormUrlEncodedContent(form)); res.EnsureSuccessStatusCode(); var json = await res.Content.ReadAsStringAsync(); var doc = JsonDocument.Parse(json); var img = doc.RootElement.GetProperty("img").GetString() ?? throw new Exception("No img in response: " + json); // Step 2: download the image var imgBytes = await http.GetByteArrayAsync( "https://www.websequencediagrams.com/" + img); await File.WriteAllBytesAsync(outputFile, imgBytes); return outputFile; } static async Task Main() { await GetSequenceDiagramAsync( "Alice->Bob: Hello\nBob-->Alice: Hi", "diagram.png"); Console.WriteLine("Saved to diagram.png"); } }
Go
package main import ( "encoding/json" "fmt" "io" "net/http" "net/url" "os" ) // getSequenceDiagram calls the WebSequenceDiagrams API and saves the image. func getSequenceDiagram(message, outputFile, style, format string) error { // Step 1: request the diagram resp, err := http.PostForm( "https://www.websequencediagrams.com/index.php", url.Values{ "apiVersion": {"1"}, "message": {message}, "style": {style}, "format": {format}, // "apikey": {"YOUR_PREMIUM_KEY"}, }, ) if err != nil { return fmt.Errorf("POST failed: %w", err) } defer resp.Body.Close() var result struct { Img string `json:"img"` Errors []string `json:"errors"` } if err := json.NewDecoder(resp.Body).Decode(&result); err != nil { return fmt.Errorf("JSON decode failed: %w", err) } if result.Img == "" { return fmt.Errorf("server error: %v", result.Errors) } // Step 2: download the image imgResp, err := http.Get("https://www.websequencediagrams.com/" + result.Img) if err != nil { return fmt.Errorf("image download failed: %w", err) } defer imgResp.Body.Close() f, err := os.Create(outputFile) if err != nil { return err } defer f.Close() _, err = io.Copy(f, imgResp.Body) return err } func main() { err := getSequenceDiagram( "Alice->Bob: Hello\nBob-->Alice: Hi", "diagram.png", "modern-blue", "png", ) if err != nil { fmt.Fprintf(os.Stderr, "Error: %v\n", err) os.Exit(1) } fmt.Println("Saved to diagram.png") }
Community Integrations

Plugins & Extensions

The community has built integrations for popular tools and editors. If you've created your own, let us know and we'll list it here.

MCP Server for AI Agents

Connect Claude, Cursor, VS Code Copilot, or any MCP-compatible AI to generate diagrams with natural language. Setup guide & docs.

Confluence

Embed diagrams in Atlassian Confluence with the {uml-sequence} macro plugin.

JetBrains IDEs

Live preview panel for .wsd files in IntelliJ, PyCharm, WebStorm and more. Install.

Emacs

Major mode with syntax highlighting, indentation, autocompletion, and org-babel support. wsd-mode.

Sublime Text

Write .wsd files and compile with a keyboard shortcut. EZWebSequenceDiagrams.

Eclipse

Preview diagrams from .wsd files directly in your workspace. Plugin.

Maven

Automate diagram generation during your build process. Plugin.

Node.js (npm)

Server-side rendering with the websequencediagrams package.

Desktop Editor

Standalone Windows app with Git integration, PDF & SVG export. Source.

XWiki

Macro for XWiki. Install.