# grunt-websequencediagrams-ws

> Grunt plugin to allow UML sequence diagrams to be created, using WebSequenceDiagram.com.

Latest version **0.3.9** (published 2017-03-20) · 0 weekly downloads

## Install

```sh
npm install grunt-websequencediagrams-ws
pnpm add grunt-websequencediagrams-ws
yarn add grunt-websequencediagrams-ws
bun add grunt-websequencediagrams-ws
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.9 |
| Published | 2017-03-20 |
| First published | 2017-03-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Waseem Akbar |
| Maintainers | mishgul |
| Keywords | gruntplugin, uml, sequence diagram, sequence, diagram, websequencediagrams, websequencediagrams.com |

## Links

- npm: https://www.npmjs.com/package/grunt-websequencediagrams-ws
- Repository: https://github.com/sheepdog-mcfry/grunt-websequencediagrams
- Homepage: https://github.com/markbirbeck/grunt-websequencediagrams
- Issues: https://github.com/sheepdog-mcfry/grunt-websequencediagrams/issues
- npm.io page: https://npm.io/package/grunt-websequencediagrams-ws

## Dependencies (1)

- [websequencediagrams-ws](https://npm.io/package/websequencediagrams-ws.md) ^0.0.3

## Recent versions

- 0.3.9 (latest) — 2017-03-20
- 0.3.8 — 2017-03-20
- 0.3.7 — 2017-03-20
- 0.3.6 — 2017-03-20
- 0.3.5 — 2017-03-20
- 0.3.4 — 2017-03-20
- 0.3.3 — 2017-03-20
- 0.3.2 — 2017-03-20

## README

# grunt-websequencediagrams

> Grunt plugin to allow UML sequence diagrams to be created, using WebSequenceDiagrams.com.

## Getting Started
This plugin requires Grunt `~0.4.4`

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install grunt-websequencediagrams --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('grunt-websequencediagrams');
```

## The "websequencediagrams" task

### Overview
In your project's Gruntfile, add a section named `websequencediagrams` to the data object passed into `grunt.initConfig()`.

```js
grunt.initConfig({
  websequencediagrams: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});
```

### Input Files
The files to convert follow a format described on the [examples page of WebSequenceDiagrams.com](https://www.websequencediagrams.com/examples.html). The examples below use the following input:

```
title Authentication Sequence

Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response
```

### Options

See [websequencediagrams](https://www.npmjs.org/package/websequencediagrams) for more information about options.

#### options.outputType
Type: `String`
Default value: `'png'`

A string value that is used to indicate the type of output to generate. Valid output types are `'png'`, `'svg'` and `'pdf'`.

#### options.styles
Type: `String`
Default value: `'modern-blue'`

A string value that is used to indicate which output style should be used.

### Usage Examples

#### Default Options
In this example, the default options are used to create a PNG image using the 'modern blue' style.

```js
grunt.initConfig({
  websequencediagrams: {
    options: {},
    your_target: {
      files: {
        'doc/default.png': ['doc/sequence.uml'],
      },
    },
  },
});
```

![Sequence diagram using default options](test/expected/default.png?raw=true)

#### Custom Options
In this example, custom options are used to create an SVG image using the 'napkin' style.

```js
grunt.initConfig({
  websequencediagrams: {
    options: {
      outputType: 'svg',
      style: 'napkin'
    },
    your_target: {
      files: {
        'doc/default.svg': ['doc/sequence.uml'],
      },
    },
  },
});
```

![Sequence diagram using custom options](test/expected/default-napkin.png?raw=true)

## Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).

## Acknowledgements

All of the hard word is done by [Joe Hildebrand](https://github.com/hildjj)'s [websequencediagrams](https://www.npmjs.org/package/websequencediagrams) module. This module is simply a thin wrapper around it to make it Gruntable.

## Release History
2015-11-20 (v0.3.2)

* Fix test of multiple files. Thanks to @jfritzbarnes.

2015-01-27 (v0.3.1)

* Add missing 's' to domain in README. Thanks to @Sadrak.

2014-12-31 (v0.3.0)

* Allow processing of more than one file. Closes #3. Thanks to @Alexey1Gavrilov.

2014-11-14 (v0.2.2)

* Fix README to include target. Closes #1. Thanks to @chrono.

2014-03-17 (v0.2.0)

* Initial release.

---
_Source: https://npm.io/package/grunt-websequencediagrams-ws · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._