PlantUML Visualizer

🏭 A Chrome / Firefox extension for visualizing PlantUML descriptions.

Release Pages

• Chrome: https://chrome.google.com/webstore/detail/plantuml-visualizer/ffaloebcmkogfdkemcekamlmfkkmgkcf
• Firefox: https://addons.mozilla.org/firefox/addon/plantuml-visualizer/

Visualizable Pages

• GitHub
  • File Viewer
    • https://github.com/WillBooster/plantuml-visualizer/blob/master/puml-sample/class.pu
    • !include directive: https://github.com/WillBooster/plantuml-visualizer/blob/master/puml-sample/state.pu
  • Issues: WillBooster#54
  • Pull Requests
    • Added: https://github.com/WillBooster/plantuml-visualizer/pull/49/files
    • Deleted: https://github.com/WillBooster/plantuml-visualizer/pull/50/files
    • Changed: https://github.com/WillBooster/plantuml-visualizer/pull/24/files
    • !include directive: https://github.com/WillBooster/plantuml-visualizer/pull/423/files
  • Code blocks in README or something
    • README.md: https://github.com/WillBooster/plantuml-visualizer/blob/master/puml-sample/README.md
• Any .pu / .puml / .plantuml files
  • GitHub Raw Files (only Chrome)
    • https://raw.githubusercontent.com/WillBooster/plantuml-visualizer/master/puml-sample/class.pu
    • !include directive: https://raw.githubusercontent.com/WillBooster/plantuml-visualizer/master/puml-sample/state.pu
    • IMPORTANT NOTE: any extension on Firefox cannot work on GitHub Raw Files due to https://bugzilla.mozilla.org/show_bug.cgi?id=1411641
  • Local Files
    • file:///C:/Users/XXX/Projects/plantuml-visualizer/puml-sample/class.pu
    • !include directive: coming soon ...
    • IMPORTANT NOTE: if you use Google Chrome, you need to allow this extension to access file URLs
      1. Open chrome://extensions/?id=ffaloebcmkogfdkemcekamlmfkkmgkcf in Chrome
      2. Enable "Allow access to file URLs"

Visualization Examples

The visualization result of https://github.com/WillBooster/plantuml-visualizer/pull/24/files is as follows.

Requirements for Development

• Node.js
• Yarn v1

Please check the detailed versions in GitHub Actions like the below screenshot.

Development Preparation

1. yarn to install the latest dependencies
2. yarn build
3. Open Chrome browser
4. Open chrome://extensions
5. Enable Developer Mode
6. Click Load Unpacked and open dist directory (plantuml-visualizer/dist)

Development

1. yarn to install the latest dependencies
2. yarn start
3. Open Chrome
4. Rewrite some code files
5. Close and Reopen Chrome browser (not only tabs)
   • or reload this extension in chrome://extensions and reload pages
6. Debug code
7. Go to step 4

Deployment for Chrome

1. Bump version in manifest.json and package.json
2. yarn package
3. Open https://chrome.google.com/webstore/developer/dashboard
4. Upload dist.zip

Deployment for Firefox

1. Bump version in manifest.json and package.json
2. yarn package
3. Open https://addons.mozilla.org/en-US/developers/addon/plantuml-visualizer/edit
4. Upload dist.zip file