binshu

Oh, I forgot about another aspect of Schemio. You can make use of scripts and functions using SchemioScript language. Not sure if that is going to be helpful for your case, but you can take a look at this demo: https://schem.io/projects/schemio-demo-2tABbv50x2tGRHpS/docs...

If you go to edit mode and select the "Ball" object (in the top hiearchy), then go to behavior panel, you will find that it has a "script" action in the "Play" event. You can take a look at how I implemented that scene and perhaps get some insights for yourself.

Also I had a small section about SchemioScript in this article: https://medium.com/@ivan.ishubin/interactive-diagrams-for-co...

I use it when I need to build complex templates or interactive learning demonstrations like on Brilliant. For example a friend of mine is preparing similar interactive demos with Schemio for kids at school.

Another thing that Schemio has is the concept of classes, functions and arguments bindings. Unfortunately I did not have a chance to write an article or prepare a video for this. But the idea is that you can prepare a class, with complex behavior and even its own configurable arguments, and then you can select any object on the scene and specify that it uses that class. Again, I don't know your exact situation, but just laying out the options

I actually forgot about the 7th option - desktop app built with Electron. Unfortunately it's been broken for a while and the electron build fails with some weird error message. I just didn't have enough time to look into it since I am currently a single developer working on it.

Yes, I still have to update the transformation matrix for every children on every movement of any of their ancestors. But it doesn't cause a significant performance drop so far. Currently it is only computing it just in case, but it is actually not affecting the SVG elements at all so they do not have to be updated. The only reason for re-computing this transformation matrix is if I would have to know the local-to-world coordinates of a particular object, when readjusting the attached connector or doing some other logic based on their positioning

This idea came to me after my first on-call, when I had to quickly figure out what is going on in a distributed system of 200+ micro-services. That's why I focused on embedding documentation into a diagram and being able to zoom into the parts of a complex system as much as you can. So that you stay focused on the entire picture. The alternative is to jump between multiple Google Docs/Wiki/Readmes for multiple services and read tones of text.

Yes, but there is more than that. Actually there are 6 types of deployments of Schemio

1. Self-hosted, there is even a docker container available (https://hub.docker.com/r/binshu/schemio/tags). It does not have authorization and user-management, stores all diagrams on a file system. But it allows you to run server in write and read-only mode

2. https://schem.io - a service for collaborative editing and sharing of diagrams. This is obviously a closed-source for now and it uses the open-source frontend of Schemio

3. Schemio as a js library. Although I am not really releasing it to npm, just hadn't the time to work this out. But there is an option to build a js lib that lets you use Schemio as a Vue component. That's actually how I made it work on https://schem.io

4. https://schemio.app - Google Drive based frontend. All your diagrams are stored on Google Drive. Obviously you cannot share your diagrams, as they are only available to you. This is completely open-sourced and you can even build it yourself with npm

5. Static deployment. If you use option 1, you can export all of your diagrams into a static deployment and even host it on Github pages.

6. Standalone player of Schemio that lets you embed a single diagram on your website

Do you mean diagrams as code? something like PlantUML https://pdf.plantuml.net/1.2020.22/PlantUML_Language_Referen... ?

If that's what you mean, then no. I do have plans to work on this in the future, but I am not sure when I'll get the time for that.

Or do you mean just generating a diagram and posting it to Schemio programatically? This is possible, but it's not documented.

All diagrams are stored in JSON by the way and the structure is quite straightforward, so it shouldn't be too difficult to generate it yourself

Technically yes, we can say that all graphical editors rely on linear algebra for various purposes. It's just that not all of the problems are obvious to anyone who starts developing something like this. That is why I decided to share some of the challenges I had encountered from a math perspective. I guess the main point I wanted to make is how matrices simplified the calculations for me even though I already used linear algebra.

Also another point is that, if you rely on SVG for rendering you could get away with just the code without thinking too much about the math involved. For instance if I wouldn't have introduced object hierarchy, I wouldn't even have to bother with math at all. SVG can take care of all the transformations, I wouldn't even have to know that matrices exist and that I could use them in svg objects 1-on-1. Dragging an object without a hierarchy would also propably be much easier, all I had to do is to change the translate(x,y) inside of the svg transform attribute.

I am sorry for the confusion in my article. I should have probably clarified that this is a 2D point in a 2D space. To make the transformations work correctly you need to represent a 2D point as a 3x1 matrix. And if you want to perform the same in a 3D space, then a 3D point should be represented as a 4x1 matrix, where the last row is always 1.

Hi, I am the author. Thanks for your suggestion! I will definitely go through that article, once I have some time. Just had a quick glance and it looks like there is also a section about transformation matrix, which is what I have been using

Thanks! Schemio is open-sourced with the exception of the backend part of https://schem.io. But the frontend code is completely open and you can even host your own server. Although in that case it would simply use a file system as a storage, so no database and no user management.