Skip to content

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

License

Notifications You must be signed in to change notification settings

ishubin/schemio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7690e2a · Mar 29, 2025
Feb 9, 2025
Mar 25, 2025
Mar 9, 2025
Mar 28, 2025
Oct 9, 2024
Dec 2, 2018
Sep 10, 2024
Mar 29, 2025
Mar 28, 2025
Oct 10, 2021
Nov 15, 2021
May 7, 2023
Apr 27, 2019
Oct 30, 2021
Oct 30, 2021
Dec 31, 2024
Nov 24, 2022
Jan 15, 2025
Apr 27, 2019
Dec 31, 2024
Sep 10, 2024
Oct 30, 2021
Nov 15, 2021
Aug 25, 2021
Dec 15, 2021
Oct 18, 2024
May 28, 2024
Mar 21, 2025
Oct 17, 2022
May 18, 2023
Nov 29, 2022
Nov 29, 2022
Mar 28, 2025
Mar 29, 2025
Sep 13, 2022
Sep 10, 2024
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Jan 11, 2025
Nov 24, 2022
Nov 24, 2022
Jan 11, 2025
Nov 24, 2022
Jan 11, 2025
Jan 11, 2025

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