web-sequence

web-sequence copied to clipboard

#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:

Web App and Chrome extension

Shared steps - build and test:

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

Chrome extension

1. Update version in extension/manifest.json
2. Zip the extension folder
3. yarn upload to upload the extension to Google Web Store
4. 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

1. Uninstall and reinstall the latest version of extension
2. 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.

1. In travisCI UI, go to web-sequence
2. Click More options -> Trigger Build
3. Select which branch to deploy
4. In Custom Config put the config below, and change the FIREBASE_PROJECT value accordingly.
5. 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

1. Go to the page of app
2. 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

Copyright (c) 2017 Peng Xiao, ZenUml.com