web-sequence: A JavaScript repository from cyg056

#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	Console	Travis-CI
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 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 extension/manifest.json
Zip the extension folder
yarn upload to upload the extension to Google Web Store
yarn pub to publish the 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]

Travis CI

Node: Custom Build only support trigger a build of a branch, not a commit.

In travisCI UI, go to web-sequence
Click More options -> Trigger Build
Select which branch to deploy
In Custom Config put the config below, and change the FIREBASE_PROJECT value accordingly.
Trigger Build

env:
  global:
#    - PRODUCT_TO_DEPLOY=none|web|chrome|all
#    - FIREBASE_PROJECT=default|staging|prod
    - PRODUCT_TO_DEPLOY=web
    - FIREBASE_PROJECT=default

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 build-prod    // build a production release
$ gulp 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

cyg056/web-sequence