Skip to content
forked from ishubin/schemio

Web based diagramming app that lets you build interactive diagrams and prototypes

License

Notifications You must be signed in to change notification settings

achichinov/schemio

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Schemio

Schemio is a web based diagramming app that allows you to build interactive diagrams. Although originally Schemio was not designed for this, but it is also possible to use it as a prototyping app.

Features of Schemio:

  • Creating interactive diagrams
  • Documenting individual items in your diagrams
  • Linking diagrams. You can add links to other diagrams or to external documents
  • Component based diagrams: you can load diagrams dynamically inside of each other. This allows you to manage your digrams better and lets the user discover more and more while staying in original document
  • Frame animation editor: t is possible to use frame based animations for any property.
  • Draw free-form shapes
  • Relative transformations: you can attach items to other items in your diagrams and tweak rotation, pivot point and scale
  • Behavior editor: you can assign event handlers to any item (events like: init, click, mouse in, mouse out)
  • Various animation functions: you can have smooth transitions like fade in or fade out, move items, render particle effect etc.
  • Export entire diagram or only selected objects as SVG
  • Generate static version of all of your diagrams so that you can host it anywhere, even on GitHub pages

Scheenshot of Schemio

Scheenshot of Schemio

Demo: What happens when you open a website in your browser

There is a demo, built with Schemio that contains interactive diagrams that answer a popular interview question: "What happens when you open a website in your browser".

Introduction to interactive diagrams with Schemio (Youtube video)

IMAGE ALT TEXT

Configuration of server-based version of Schemio

You can configure Schemio via the following environment variables

Env var Default value Description
SERVER_PORT 4010 Server listening port
FS_ROOT_PATH /opt/schemio Path to Schemio storage on file system. This is where it will store all your diagrams and uploaded files
FILE_UPLOAD_MAX_SIZE 10485760 Upload size limit for media files
VIEW_ONLY_MODE false If set to true - it does not allow editing, only viewing of folders and diagrams
ROUTE_PREFIX Custom route prefix for all server endpoints. Used in case you want to serve Schemio next to other web services on the same port (e.g. in a load balancer). This way you can specify custom route (e.g. /schemio). Make sure that it starts with /.

Running with Docker

Dockerized version of Schemio is available here: https://hub.docker.com/repository/docker/binshu/schemio

You can run it like this:

docker pull binshu/schemio:latest

docker run -v "$(pwd):/opt/schemio" \
    -p 4010:4010 \
    -e FS_ROOT_PATH=/opt/schemio \
    -e SERVER_PORT=4010 \
    binshu/schemio:latest

Don't forget to pull latest changes as Schemio is frequently updated.

License

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.

About

Web based diagramming app that lets you build interactive diagrams and prototypes

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 66.6%
  • Vue 28.2%
  • CSS 3.7%
  • Scheme 0.9%
  • HTML 0.2%
  • Shell 0.2%
  • Other 0.2%