dontry/web-sequence

#Web Sequence

Web Sequence is a Chrome Extension and a Web App that convert your Chrome tab into a sequence diagram generator. Something like CodePen or JSFiddle, but for sequence diagram generation.

Go to Web App

##Deployment

We will discuss deployment of the following items:

App/Plugin	Target	Local	Web Console	Github Actions
Web App	Firebase	Y	N	Y
Functions	Firebase	Y	N	N
Chrome extension	Web store	Y	Y	N

Web App and Chrome extension

Shared steps - build and test:

Make sure you are on the right branch (master).
yarn install to install the dependencies
yarn build to build the product release
yarn release to copy build files to app / extension
http-server ./app to verify build in ./app
access localhost instead of 127.0.0.1 to allow firebase access

Chrome extension

Update version in src/manifest.json
yarn build to build the product release
yarn release to build the Chrome extension
Use the ZenUml extension to the Chrome Browser
1. Chrome -> settings -> extensions
2. Enable 'Developer Mode'
3. Load the unpacked extensions: folder ./extension

Optimisation: The #3 step in the shared steps would generate a zip file. The #2 step can be omitted if we pass the generated zip file name to the script of yarn upload and yarn pub.

Post deployment

Uninstall and reinstall the latest version of extension
Do smoke test by creating a new diagram

Web App

From local

// firebase.json, this will deploy the `app` folder
$ firebase deploy --project [staging|prod]

Post development

Go to the page of app
Do smoke test by create a new diagram

Development

First time setup

$ yarn install  // instal modules
$ yarn start    // start a local server

$ yarn build    // build a staging release
$ yarn release  // copy resources to app / extension

Enable/Disable DEBUG

In Chrome console, type in document.cookie='DEBUG=true' or document.cookie='DEBUG=;max-age=1'.

$ yarn link vue-sequence # use un-uglyfied version
$ webpack                # build bundle.js to src/lib

Install

Install it from Chrome Web Store - Web Sequence. You can also search "Web Sequence" or "Sequence Diagram" to find it.

Features

Supports method call, internal method, alt (if/else) and loop (for, foreach, while) keywords
Works offline
Save and load your creations
Auto-save feature
Code auto-completion
Import & Export all creations anytime, anywhere
Multiple editor themes & other configurable settings
Font options + use any system font!
Very easily accessible. Simply open a new tab in Chrome! (in chrome extension only)
Capture preview screenshot (in Chrome extension only)

Follow @ZenUml for updates or tweet out feature requests and suggestions.

Support Web Sequence

Web Sequence is completely free and open-source. If you find it useful, you can show your support by sharing it in your social network or by simply letting me know how much you 💖 it by tweeting to @ZenUml.

Awesome libraries used

This project is a fork of Web Maker
The diagram generator is built on top of VueJs

License

MIT Licensed

dontry / web-sequence