GithubHelp home page GithubHelp logo

ishubin / schemio Goto Github PK

View Code? Open in Web Editor NEW
84.0 2.0 3.0 18.5 MB

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

Home Page: https://schem.io

License: Mozilla Public License 2.0

HTML 0.22% CSS 4.17% JavaScript 53.25% Vue 41.76% Shell 0.31% Dockerfile 0.03% Python 0.26%
diagramming prototyping

schemio's Introduction

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

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/.

schemio's People

Contributors

ishubin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

schemio's Issues

Introduce the concept of projects

  • Create project view
  • Project selection view
  • Search view (show only scheme in selected project)
  • Link to another scheme (suggest only in the same project)
  • Access control

Store images in mongodb

Instead of storing images locally, it should store it in Mongodb so that multiple instances of schemio can get access to it.

  • Refactor image storage
  • Upload image to mongo
  • Retrieve it from mongodb and cache it in local fs

Improve CSS. Make editor look nicer

  • Item Properties
  • Fix alignment in quick helper panel
  • Stroke pattern control element
  • Create Panel. Switch to svg icons with details popup when hovering elements.
  • Header. Moved controls to quick helper panel. Make the scheme title more obvious
  • Fix scrolling of side panels (make it independent from each other)
  • Behavior panel
  • [ ] Shape dropdown in Item Properties. Change it into icon and popup

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.