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.
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.
Generate diagrams programmatically with a simple HTTP POST to
https://www.websequencediagrams.com/index.php.
Request Parameters
message — the diagram source text
style — rendering style name (e.g. modern-blue)
apiVersion — must be 1
format — png, svg, or pdf
apikey — (optional) your premium API key
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"