Metaviz Editor

Diagramming editor library for web browser.

v0.9.18

About

Metaviz is a web-based team productivity tool for creating visually stunning diagrams with ease.

Important note: this repository is for developers and contains editor code with development information. If you want to start using the tool quickly - go to the distribution page https://github.com/dariuszdawidowski/metaviz containing the ready-to-use package.

Component libraries

Total Diagram: https://github.com/dariuszdawidowski/total-diagram

Total Popup: https://github.com/dariuszdawidowski/total-popup

Total Pro Menu: https://github.com/dariuszdawidowski/total-pro-menu

Total Text: https://github.com/dariuszdawidowski/total-text

Third party libraries

Emoji Picker: https://github.com/nolanlawson/emoji-picker-element

Install

Clone these dependency repositories next to metaviz-editor project:

git clone git@github.com:dariuszdawidowski/total-diagram.git
git clone git@github.com:dariuszdawidowski/total-popup.git
git clone git@github.com:dariuszdawidowski/total-pro-menu.git
git clone git@github.com:dariuszdawidowski/total-text.git

Directory structure:

metaviz/
|-- metaviz-editor/
|-- total-diagram/
|-- total-popup/
|-- total-pro-menu/
|-- total-text/

Third party libraries are loaded from CDN.

Quick start in development mode

Open metaviz-editor/localtest.html directly in the browser (File->Open file... or just drag&drop).

Build minified bundle files

npm install
npm run build

Note: This is browser-centric vanilla JavaScript library, npm is only used to minify and bundle files into one.

Load from CDN

https://unpkg.com/metaviz-editor@latest/dist/metaviz-editor.js
https://unpkg.com/metaviz-editor@latest/dist/metaviz-editor.css

Authors

Dariusz Dawidowski
Maksym Godovanets