Our great sponsors
-
manim
A community-maintained Python framework for creating mathematical animations. (by ManimCommunity)
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
-
workload-discovery-on-aws
Workload Discovery on AWS is a solution to visualize AWS Cloud workloads. With it you can build, customize, and share architecture diagrams of your workloads based on live data from AWS. The solution maintains an inventory of the AWS resources across your accounts and regions, mapping their relationships and displaying them in the user interface.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.
Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.
I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.
Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?
0. https://github.com/bpmn-io/bpmn-js-token-simulation
1. https://news.ycombinator.com/item?id=30576688
2. https://github.com/dai-shi/excalidraw-claymate
3. https://github.com/ManimCommunity/manim
I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.
Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.
I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.
Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?
0. https://github.com/bpmn-io/bpmn-js-token-simulation
1. https://news.ycombinator.com/item?id=30576688
2. https://github.com/dai-shi/excalidraw-claymate
3. https://github.com/ManimCommunity/manim
I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.
Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.
I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.
Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?
0. https://github.com/bpmn-io/bpmn-js-token-simulation
1. https://news.ycombinator.com/item?id=30576688
2. https://github.com/dai-shi/excalidraw-claymate
3. https://github.com/ManimCommunity/manim
GoJS might work for you: https://gojs.net
Although the focus of the library is interactivity and not setting up sequences of animation, but that is possible too.
It's interpreted line-by-line so that each line represents one state of the diagram. There are commands to delete nodes: when I delete a node I just remove it from its parent but leave it in the top-level state. That has the neat effect that if I re-add it, I get the node with all its descendents and connections restored in one step, which I can use to pre-diagram things I talk about often.
After calculating the drawing state by applying all the commands from the start to the current selection, the next step is to limit this to the visible pieces. I make a copy of the drawing state, starting from the currently zoomed node and following all children. Then I add all connections, if all the 'to' ends of the connections are visible.
Next, I do layout. Starting with the visible tree, annotate all nodes with positions of the box (if any), the icon, and the label. The diagrams I'm drawing are similar to those produced by AWS Perspective: https://aws.amazon.com/solutions/implementations/aws-perspec... , so if a node has no children I draw it as a large icon with a label below, if it has children, it is a box with a small icon to the top left, a centred label at the top. Each node can choose one of a small number of layouts that I can do automatically with just a list of children: 'ring' (a circle of nodes), 'row', 'column', or 'snake' (the default: alternate rtl-ltr rows to evenly fill the space; this will be a grid if that fits or could end up like 4-3-4-3 if it doesn't). In ring & snake, boxes are always 4:3; in row and column they are stretched to fit.
Next, I do animation. I keep around the previous layed-out state, and use window.requestAnimationFrame to calculate the position of boxes between the start and end state. A box that is in both start and end states is moved, if it is only in start or end I fade it in or out as need be. This lets me animate between _any_ two states of the drawing, so I can talk about one bit of the diagram, then jump back and forth by clicking in the command window, and it smoothly animates between them. I found animating for just 0.5s worked best for interactivity; it's nice to see a slower move but it feels laggy when typing.
I calculate arrow positions after calculating the final position of boxes and icons. I chose to use circular arcs, because you will never get an awkward situation where an arc lies directly along the edge of a box; straight things are always boxes, curvy things are always arrows. SVG wants two endpoints and a centre to draw these. So, I start with an arc between the centres of the two boxes, choose a radius twice as long as the distance between these points; then I calculate the intersection of the arc with the boxes, and use those two intersection points as the start/end of the arc. (this isn't that difficult, the formula for the arc is in the svg spec, and it's checking 4 straight lines, choose the intersection point closest to the other box). Like the boxes, the arrows fade in and out if they are not needed in one of the start or end states.
All of this then just replaces the content of the svg. It's surprisingly smooth.
One last detail is icons. I'm using the icons from mingrammer (https://github.com/mingrammer/diagrams/tree/master/resources), which gives me about 1600(!). Finding an icon _while you type_ is awkward and initially I had to drop to the shell to find the file I was going to refer to. I tried giving the drawing tool a mode that would let me visually pick the icon, but 1600 is too many. So I changed it to use a fuzzy search to find an appropriate icon: it looks for the icon where the sequence of characters appear in the shortest substring of the icon path: eg for 'ec2' it constructs the regex `.(e.?c.*?2)`, scoring the matching substring 'ec2' better than 'elastic2', and the shorter containing string 'aws/compute/ec2' better than eg 'aws/compute/ec2-rounded'. (I have a further round of preferences so that the top level aws iconset is preferred to eg the ibm one, which has terrible icons). This gives you an icon for almost anything you type, and encourages a more playful approach to picking the icon than the exact-match approach.
There's a bit more to it, I also accept some markdown which fades from the diagram to slides with bullet points, then back to the diagram if the current command is a diagramming command. But the description above is most of it. I could probably have done this better with eg d3 to do the drawing but I am not a front end developer at all and the whole thing was more of a hack over a couple of weekends. I should clean it up a bit, but it works.
I serve up pre-prepared pages with this js attached from github pages, I can walk through eg the flow of data clicking the down arrow to change the selection which causes it to animate to the next state which has the next arrow... and so on.
It's interpreted line-by-line so that each line represents one state of the diagram. There are commands to delete nodes: when I delete a node I just remove it from its parent but leave it in the top-level state. That has the neat effect that if I re-add it, I get the node with all its descendents and connections restored in one step, which I can use to pre-diagram things I talk about often.
After calculating the drawing state by applying all the commands from the start to the current selection, the next step is to limit this to the visible pieces. I make a copy of the drawing state, starting from the currently zoomed node and following all children. Then I add all connections, if all the 'to' ends of the connections are visible.
Next, I do layout. Starting with the visible tree, annotate all nodes with positions of the box (if any), the icon, and the label. The diagrams I'm drawing are similar to those produced by AWS Perspective: https://aws.amazon.com/solutions/implementations/aws-perspec... , so if a node has no children I draw it as a large icon with a label below, if it has children, it is a box with a small icon to the top left, a centred label at the top. Each node can choose one of a small number of layouts that I can do automatically with just a list of children: 'ring' (a circle of nodes), 'row', 'column', or 'snake' (the default: alternate rtl-ltr rows to evenly fill the space; this will be a grid if that fits or could end up like 4-3-4-3 if it doesn't). In ring & snake, boxes are always 4:3; in row and column they are stretched to fit.
Next, I do animation. I keep around the previous layed-out state, and use window.requestAnimationFrame to calculate the position of boxes between the start and end state. A box that is in both start and end states is moved, if it is only in start or end I fade it in or out as need be. This lets me animate between _any_ two states of the drawing, so I can talk about one bit of the diagram, then jump back and forth by clicking in the command window, and it smoothly animates between them. I found animating for just 0.5s worked best for interactivity; it's nice to see a slower move but it feels laggy when typing.
I calculate arrow positions after calculating the final position of boxes and icons. I chose to use circular arcs, because you will never get an awkward situation where an arc lies directly along the edge of a box; straight things are always boxes, curvy things are always arrows. SVG wants two endpoints and a centre to draw these. So, I start with an arc between the centres of the two boxes, choose a radius twice as long as the distance between these points; then I calculate the intersection of the arc with the boxes, and use those two intersection points as the start/end of the arc. (this isn't that difficult, the formula for the arc is in the svg spec, and it's checking 4 straight lines, choose the intersection point closest to the other box). Like the boxes, the arrows fade in and out if they are not needed in one of the start or end states.
All of this then just replaces the content of the svg. It's surprisingly smooth.
One last detail is icons. I'm using the icons from mingrammer (https://github.com/mingrammer/diagrams/tree/master/resources), which gives me about 1600(!). Finding an icon _while you type_ is awkward and initially I had to drop to the shell to find the file I was going to refer to. I tried giving the drawing tool a mode that would let me visually pick the icon, but 1600 is too many. So I changed it to use a fuzzy search to find an appropriate icon: it looks for the icon where the sequence of characters appear in the shortest substring of the icon path: eg for 'ec2' it constructs the regex `.(e.?c.*?2)`, scoring the matching substring 'ec2' better than 'elastic2', and the shorter containing string 'aws/compute/ec2' better than eg 'aws/compute/ec2-rounded'. (I have a further round of preferences so that the top level aws iconset is preferred to eg the ibm one, which has terrible icons). This gives you an icon for almost anything you type, and encourages a more playful approach to picking the icon than the exact-match approach.
There's a bit more to it, I also accept some markdown which fades from the diagram to slides with bullet points, then back to the diagram if the current command is a diagramming command. But the description above is most of it. I could probably have done this better with eg d3 to do the drawing but I am not a front end developer at all and the whole thing was more of a hack over a couple of weekends. I should clean it up a bit, but it works.
I serve up pre-prepared pages with this js attached from github pages, I can walk through eg the flow of data clicking the down arrow to change the selection which causes it to animate to the next state which has the next arrow... and so on.
