SeqCode

UML sequence diagrams automatically translated from simple code

SeqCode (pronounced "seek code") is an easy to learn script in the style of a simple procedural programming language that is automatically translated into UML sequence diagrams.

This is a tool designed for programmers that want to capture the logic rather than mess with a modelling or drawing application.

The following shows an example script and the resulting SVG diagram:

For a live demonstration visit: https://seqcode.app

This repo contains the npm package that performs the script parsing, layout and svg generation. It can be used in node and in the browser.

SeqCode is licensed under the terms of the BSD 2-Clause License.

Installation

npm install seqcode

Usage

import seqcode from "seqcode";

const {svg,errors} = seqcode("a.do()", { /* options */ });
if (errors) console.error(errors)
const str = svg.svg()    // string of svg source
const element = svg.node // HTML Element

Node Dependencies

In a nodejs environment you need to create the dependencies for SVG creation (the tests do this):

import { createSVGWindow } from 'svgdom';
import { registerWindow } from '@svgdotjs/svg.js'

const window = createSVGWindow();
const document = window.document;
registerWindow(window, document);

Options

| Option | Default | Type | Description | | -------------- | --------- | ------------- | --------------------------------------------------------------------------------- | | foreground | "black" | String | CSS color used for the text, lines, arrows and box outlines. | | background | "white" | String | CSS color used for the background of the diagram. | | fontFamily | "verdana" | String | CSS font-family for all text except notes. | | fontSize | 12 | Integer | Pixel size of the font | | fontWeight | 100 | Integer | CSS font-weight for all text except notes. | | fillLight | "#eee" | String | CSS color for the start of the gradient fill in execution boxes and frame labels. | | fillDark | "#ddd" | String | CSS color for the end of the gradient fill in execution boxes and frame label. | | dashStyle | [8,5] | Integer Array | Dash style for lines. | | arrowSize | 7 | Integer | Size in pixels of the arrows | | margin | 30 | Integer | Margin in pixels used around the diagram. | | rowSpacing | 30 | Integer | Vertical spacing in pixels between messages. | | objectSpacing | 5 | Integer | Horizontal spacing between object life lines in pixels. | | areaPadding | 15 | Integer | Padding in pixels added to the interior of frames | | linkIconColor | "#999" | String | CSS color of the icon added when a note or frame is a link. | | noteForeground | "#0000CD" | String | CSS color of the font used in notes. | | noteFontFamily | "verdana" | String | CSS font-family of the text in notes. | | noteFontSize | 12 | Integer | Size in pixels of the font used in notes. | | noteFontWeight | 100 | Integer | CSS font-weight of the ont used in notes. | | noteLight | "#FFFDA1" | String | CSS color for the start of the gradient fill in notes. | | noteDark | "#FFEB5B" | String | CSS color of the end of the gradient fill used in notes. | | noteStroke | "#ccc" | String | CSS color of the outline of notes. | | linkHandler | | LinkHandler | Defines how links are handled. |

LinkHander

The linkHandler option is an object with the properties as per the table below. It is used to control how links in notes and ref frames are handled.

| Property | Default | Description | | -------- | --------------------------------------------------- | ----------------------------------------------------------------------- | | href | (link) => "#" | Function that returns the href value for the link element. | | target | (link) => "" | Function that returns the target value for the link element. | | onclick | (link) => `alert(decodeURI("${encodeURI(link)}"))` | Function that returns the onclick javascript code for the link element. |

Errors

Errors returned are for information, SeqCode attempts to skip over errors and continue parsing the script.

| Property | Type | Description | | -------- | ------- | ---------------------------------------------------------------------- | | tok | Token | The unexpected token that was found or null if at the end of the file. | | tok.line | Integer | The line number that the error appears on. | | tok.col | Integer | The column number that the error appears on. | | tok.type | Integer | The type of token that was found. | | tok.str | String | The string/text value of the token. | | expected | String | Message describing what was expected instead of the token found. | | id | Integer | A unique id of the error that was raised, used for internal debugging. |

Acknowledgements

SVG generation is done using svg.js