Skip to content
A library for generating an interactive SVG visualization of CWL workflows
Branch: master
Clone or download
Latest commit dc74b89 Apr 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
cwl-samples Updated demo and publish script. Mar 1, 2017
docs/images Updated docs with more gifs, version bump Apr 19, 2017
src Adding missing closing box bracket that causes issues in some browsers Apr 9, 2019
.DS_Store Merge master into drag-scroll Apr 28, 2017
.gitignore prepare for v1.0.0 Nov 9, 2017
.npmignore add npmignore Dec 22, 2017
.travis.yml turn off travis email notifications Feb 5, 2018 Create Jun 4, 2018
LICENSE Initial commit Feb 12, 2017 add travis status to readme Feb 5, 2018
cwl-svg.iml do execution properly Nov 7, 2017
index.ts export svg dumper properly Apr 19, 2018
package-lock.json 2.1.1 Apr 19, 2018
package.json Bump version 2.1.4 Apr 9, 2019
protractor.config.js add more tests and multitest build Oct 6, 2017
tsconfig.base.json add deletion plugin Oct 31, 2017
tsconfig.json integration with cottontail, wip Oct 12, 2017
tsconfig.test.json add test procedure Oct 5, 2017
webpack.config.js fix listener leaks and bugs Oct 17, 2017
yarn.lock change color of faded nodes Jan 9, 2018


Build Status

CWL-SVG is a Typescript library for visualization of Common Workflow Language workflows


npm install cwl-svg

Standalone Demo

git clone
cd cwl-svg
npm install
npm start
// Point browser to http://localhost:8080


        #svg {
            width: 100%;
            height: 100%;
            position: absolute;


<!-- You need to add “cwl-workflow” class to the SVG root for cwl-svg rendering -->
<svg id="svg" class="cwl-workflow"></svg>

<!-- Add compiled scripts, however they get compiled -->
<script src="dist/bundle.js"></script>

// Content of src/demo.ts

// Dark theme
import "./assets/styles/themes/rabix-dark/theme";
import "./plugins/port-drag/theme.dark.scss";
import "./plugins/selection/theme.dark.scss";

// Light theme
// import "./assets/styles/theme";
// import "./plugins/port-drag/theme.scss";
// import "./plugins/selection/theme.scss";

import {WorkflowFactory}    from "cwlts/models";
import {Workflow}           from "./graph/workflow";
import {SVGArrangePlugin}   from "./plugins/arrange/arrange";
import {SVGNodeMovePlugin}  from "./plugins/node-move/node-move";
import {SVGPortDragPlugin}  from "./plugins/port-drag/port-drag";
import {SelectionPlugin}    from "./plugins/selection/selection";
import {SVGEdgeHoverPlugin} from "./plugins/edge-hover/edge-hover";
import {ZoomPlugin}         from "./plugins/zoom/zoom";

const sample = require(__dirname + "/../cwl-samples/rna-seq-alignment.json");

const wf = WorkflowFactory.from(sample);

const svgRoot = document.getElementById("svg") as any;

const workflow = new Workflow({
    model: wf,
    svgRoot: svgRoot,
    plugins: [
        new SVGArrangePlugin(),
        new SVGEdgeHoverPlugin(),
        new SVGNodeMovePlugin({
            movementSpeed: 10
        new SVGPortDragPlugin(),
        new SelectionPlugin(),
        new ZoomPlugin(),

// workflow.getPlugin(SVGArrangePlugin).arrange();
window["wf"] = workflow;



Arranged and scaled BCBio workflow


Selection and Highlighting




Connecting Nodesd

You can’t perform that action at this time.