[{"data":1,"prerenderedAt":624},["ShallowReactive",2],{"why-animating-diagrams-is-different":3,"why-animating-diagrams-is-different-category":245},{"id":4,"uid":5,"url":6,"type":7,"href":8,"tags":9,"first_publication_date":10,"last_publication_date":11,"slugs":12,"linked_documents":13,"lang":14,"alternate_languages":15,"data":16},"aDCneREAAGhStqaR","why-animating-diagrams-is-different","/why-animating-diagrams-is-different","blog_post","https://diagrams-design-blog.cdn.prismic.io/api/v2/documents/search?ref=asYKchIAACwABLs2&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aDCneREAAGhStqaR%22%29+%5D%5D",[],"2025-05-23T17:09:47+0000","2026-10-07T06:16:16+0000",[5],[],"en-au",[],{"category":17,"slices":18,"meta_title":236,"meta_description":237,"meta_image":238},"Motion Design Insights",[19,52,67,164,176],{"variation":20,"version":21,"items":22,"primary":23,"id":49,"slice_type":50,"slice_label":51},"default","sktwi1xtmkfgx8626",[],{"content":24},[25,34,38,41,44],{"type":26,"text":27,"spans":28,"direction":33},"heading1","Why Animating Diagrams Is Different ",[29],{"start":30,"end":31,"type":32},0,36,"strong","ltr",{"type":35,"text":36,"spans":37,"direction":33},"paragraph","Have you ever tried animating a flowchart, mind map, or process diagram in a traditional motion design tool?",[],{"type":35,"text":39,"spans":40,"direction":33},"At first, it seems straightforward. You have a few shapes, some connecting lines, and a sequence in which you want everything to appear. How complicated could it be? But then come the layers. The keyframes. The timeline. And before long, you're spending more time managing the animation than thinking about what the diagram is supposed to explain.",[],{"type":35,"text":42,"spans":43,"direction":33},"There's nothing particularly wrong with these tools. They're excellent at what they're designed to do. But animating diagrams requires a slightly different approach.",[],{"type":35,"text":45,"spans":46,"direction":33},"Because when you're animating a diagram, you're not just making things move. You're helping someone understand how things work.",[47],{"start":30,"end":48,"type":32},127,"rich_text$4d5bc05d-2c51-4ed9-83d0-23b875ddf5a6","rich_text",null,{"variation":20,"version":53,"items":54,"primary":55,"id":65,"slice_type":66,"slice_label":51},"initial",[],{"post_image":56},{"dimensions":57,"alt":51,"copyright":51,"url":60,"id":61,"edit":62},{"width":58,"height":59},864,1080,"https://images.prismic.io/diagrams-design-blog/Yhm1snuPIitvGTV__starburst-flow-gif.gif?auto=format,compress","Yhm1snuPIitvGTV_",{"x":30,"y":30,"zoom":63,"background":64},1,"transparent","post_image$b0fefc2d-adfc-42f7-a8b4-8b340601f943","post_image",{"variation":20,"version":21,"items":68,"primary":69,"id":163,"slice_type":50,"slice_label":51},[],{"content":70},[71,75,78,81,84,90,93,96,99,102,105,108,112,115,118,121,124,127,130,136,139,142,145,148,151,154,157,160],{"type":72,"text":73,"spans":74,"direction":33},"heading2","A diagram tells a different kind of story",[],{"type":35,"text":76,"spans":77,"direction":33},"Think about a typical motion graphics animation. Objects enter and leave the scene, elements move independently while transitions help carry the viewer from one moment to another. But a diagram works differently.",[],{"type":35,"text":79,"spans":80,"direction":33},"Imagine explaining how an online payment works. You might begin with a customer placing an order, introduce the payment gateway, show how the bank processes the transaction, and finally reveal whether the payment succeeds or fails. Each step depends on what came before it.",[],{"type":35,"text":82,"spans":83,"direction":33},"You wouldn't necessarily want the customer to disappear when the payment gateway appears. Both elements are part of the same process, and seeing them together helps the viewer understand their relationship which is an important distinction.",[],{"type":35,"text":85,"spans":86,"direction":33},"In traditional animation, movement often drives the story forward. In diagram animation, the relationships between elements drive the story. And those relationships influence how we approach diagram animation.",[87],{"start":88,"end":89,"type":32},67,141,{"type":72,"text":91,"spans":92,"direction":33},"How people follow an animated diagram",[],{"type":35,"text":94,"spans":95,"direction":33},"When someone looks at a diagram, they're trying to make sense of something. They might be following a sequence of events, understanding a system, comparing ideas, or tracing how one decision leads to another. As new information appears, they're connecting it to what they've already seen.",[],{"type":35,"text":97,"spans":98,"direction":33},"This is where animation becomes useful. Rather than presenting an entire complicated diagram at once, we can introduce its elements gradually.",[],{"type":35,"text":100,"spans":101,"direction":33},"A shape appears. Then a connector reveals where it leads. Another shape follows, and suddenly a relationship becomes clear. The animation itself guides user through the explanation but that only works when the movement supports the information rather than competing with it.",[],{"type":35,"text":103,"spans":104,"direction":33},"Over time, I've come to think about this through five simple principles.",[],{"type":72,"text":106,"spans":107,"direction":33},"Five principles of diagram animation",[],{"type":109,"text":110,"spans":111,"direction":33},"heading3","1. Elements often need to stay visible",[],{"type":35,"text":113,"spans":114,"direction":33},"In many animated scenes, an object appears, serves its purpose, and disappear. With diagrams on the other hand, we often want the opposite. When explaining a process, earlier steps provide context for later ones. Keeping them visible preserves context and allows the viewer to see how the complete system comes together.",[],{"type":109,"text":116,"spans":117,"direction":33},"2. Relationships matter more than movement",[],{"type":35,"text":119,"spans":120,"direction":33},"Consider two shapes connected by a line. Animating the shapes individually might look interesting, but animating the connecting line, going top-to-bottom or left-to-right or vice-versa, communicates order and direction. That relationship could represent a dependency, a sequence, a flow of information, or a cause and effect.",[],{"type":109,"text":122,"spans":123,"direction":33},"3. Position helps people remember",[],{"type":35,"text":125,"spans":126,"direction":33},"Imagine following a flowchart where the shapes keep changing positions. Even if the animation looks impressive, you'd probably spend considerable effort figuring out where everything went. That's because the position of an element becomes part of how we understand something. Once a viewer recognises a shape in a particular location, keeping it there provides a useful reference point as the diagram develops.",[],{"type":109,"text":128,"spans":129,"direction":33},"4. A little emphasis goes a long way",[],{"type":35,"text":131,"spans":132,"direction":33},"Not every shape needs an elaborate entrance. Sometimes a fade or a slight wiggle is enough. Sometimes a connector line drawing itself is all you need. A subtle transition can draw attention to a new element without distracting from the rest of the diagram. The question I like to ask is: Does this animation help the viewer notice or understand something? If it does, it has a purpose.",[133],{"start":134,"end":135,"type":32},288,356,{"type":109,"text":137,"spans":138,"direction":33},"5. The logic of the diagram can determine the animation order",[],{"type":35,"text":140,"spans":141,"direction":33},"This is perhaps the biggest difference in Diagrams.Design. When creating a diagram, we usually know the order in which we want to explain it. First, we introduce the main idea, then reveal its branches, then follow the connections and finally, bring everything together. That sequence already exists in the diagram's logic. So why should we have to translate it into a complicated timeline of layers and keyframes?",[],{"type":35,"text":143,"spans":144,"direction":33},"What if we could simply tell the diagram which elements should appear first, second, and third and so on? That question became one of the guiding ideas behind Diagrams.Design.",[],{"type":72,"text":146,"spans":147,"direction":33},"What this looks like in practice",[],{"type":35,"text":149,"spans":150,"direction":33},"Let's take a simple starburst diagram, sometimes called a radial mind map. It has a central idea connected to several surrounding concepts. Suppose we have few shapes and their respective connecting lines.",[],{"type":35,"text":152,"spans":153,"direction":33},"In a traditional motion design workflow, we might create the diagram in a vector design tool, import it into After Effects, and organise the individual elements into layers. That's potentially fifteen elements to manage before we've even started animating.",[],{"type":35,"text":155,"spans":156,"direction":33},"For an experienced motion designer, this is perfectly manageable. But if our goal is simply to explain the relationships in the diagram, it introduces quite a bit of work. So, now consider a different approach.",[],{"type":109,"text":158,"spans":159,"direction":33},"Animating with Diagrams.Design",[],{"type":35,"text":161,"spans":162,"direction":33},"In Diagrams.Design, you create the shapes and connectors directly on a canvas. Then you assign numbers to determine their animation order. Elements numbered 1 appear first, followed by elements numbered 2, then 3, and so on. You can even give multiple shapes and connectors the same number when you want them to animate together as shown in an example below. There's no need to build a traditional keyframe timeline.",[],"rich_text$bdc0a66e-23b9-4832-b3df-f5e6fffd2023",{"variation":165,"version":53,"items":166,"primary":167,"id":175,"slice_type":66,"slice_label":51},"fullWidth",[],{"post_image":168},{"dimensions":169,"alt":51,"copyright":51,"url":172,"id":173,"edit":174},{"width":170,"height":171},2940,1912,"https://images.prismic.io/diagrams-design-blog/PaquKyvsdf7IkwyL_numbered-shapes.png?auto=format,compress","PaquKyvsdf7IkwyL",{"x":30,"y":30,"zoom":63,"background":64},"post_image$7164365f-f215-4dd1-9999-0c7b786a988b",{"variation":20,"version":21,"items":177,"primary":178,"id":235,"slice_type":50,"slice_label":51},[],{"content":179},[180,186,189,192,195,198,201,207,210,213,216,219,230],{"type":35,"text":181,"spans":182,"direction":33},"One canvas, numbered animation order, and a sequence that follows the explanation.",[183],{"start":30,"end":184,"type":185},82,"em",{"type":35,"text":187,"spans":188,"direction":33},"You still have control over how elements appear, including transitions for shapes, text, and connectors. But the animation workflow starts with the diagram itself rather than a collection of independent layers. That's the difference I wanted to explore.",[],{"type":72,"text":190,"spans":191,"direction":33},"Why I built Diagrams.Design",[],{"type":35,"text":193,"spans":194,"direction":33},"I've loved creating diagrams for years. Since 2018, I've been drawing them to explain ideas, untangle complicated processes and sometimes just think through something that was difficult to put into words.",[],{"type":35,"text":196,"spans":197,"direction":33},"Most of my early diagrams were designed for print, often on an A4 page. Eventually, I wanted to bring them to life. Not because they needed fancy animation, but because I could see how revealing one part at a time might make the ideas easier to follow. ",[],{"type":35,"text":199,"spans":200,"direction":33},"The problem was the workflow. I'd create a diagram in one application, export it, bring it into another and spend time recreating or organising elements just to add a few transitions. It worked, but it felt unnecessarily complicated for something that seemed so simple.",[],{"type":35,"text":202,"spans":203,"direction":33},"I wanted a place where I could create a diagram, decide how its explanation should unfold, and export the result as a video. All without switching between applications or managing hundreds of keyframes. That's why I started building Diagrams.Design.",[204],{"start":205,"end":206,"type":32},233,248,{"type":35,"text":208,"spans":209,"direction":33},"Today, you can use it to create flowcharts, mind maps, process diagrams and other visual explanations, animate them using a numbered sequence and export them as videos, images or gifs. It's built for people who want to communicate ideas visually without having to become motion design experts first.",[],{"type":72,"text":211,"spans":212,"direction":33},"Animation should make ideas clearer",[],{"type":35,"text":214,"spans":215,"direction":33},"I don't think every diagram needs animation. A well-designed static diagram can explain an idea beautifully on its own. But when the order of information matters, animation gives us another way to communicate. It lets us control what the viewer sees, when they see it and how each new element relates to what came before.",[],{"type":35,"text":217,"spans":218,"direction":33},"And I think creating that kind of animation should be as intuitive as creating the diagram itself. That's what I'm building towards with Diagrams.Design. If you have an idea, a process, or a concept that would be easier to explain one step at a time, give it a try.",[],{"type":35,"text":220,"spans":221,"direction":33},"Create your first animated diagram",[222,229],{"start":30,"end":223,"type":224,"data":225},34,"hyperlink",{"link_type":226,"url":227,"target":228},"Web","https://app.diagrams.design","_blank",{"start":30,"end":223,"type":32},{"type":35,"text":231,"spans":232,"direction":33},"— The Diagrams.Design Team",[233],{"start":30,"end":234,"type":185},26,"rich_text$667e39a0-691d-42fe-93a2-90df65e76376","Why Animating Diagrams Is Different (And Why Most Tools Get It Wrong)","Learn why I built Diagrams.Design - an app that lets you create diagrams, animate them, and export crisp explainer videos… all in one place.",{"dimensions":239,"alt":51,"copyright":51,"url":242,"id":173,"edit":243},{"width":240,"height":241},2400,1260,"https://images.prismic.io/diagrams-design-blog/PaquKyvsdf7IkwyL_numbered-shapes.png?auto=format,compress&rect=0,184,2940,1544&w=2400&h=1260",{"x":30,"y":244,"zoom":63,"background":64},184,[246],{"id":247,"uid":248,"url":249,"type":7,"href":250,"tags":251,"first_publication_date":252,"last_publication_date":252,"slugs":253,"linked_documents":255,"lang":14,"alternate_languages":256,"data":257},"asXaDxIAACcABGfs","whats-new-in-diagrams.design-october-2026","/whats-new-in-diagrams.design-october-2026","https://diagrams-design-blog.cdn.prismic.io/api/v2/documents/search?ref=asYKchIAACwABLs2&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22asXaDxIAACcABGfs%22%29+%5D%5D",[],"2026-10-07T09:01:38+0000",[254],"whats-new-in-diagrams.design--october-2026",[],[],{"category":258,"slices":259,"meta_title":265,"meta_description":270,"meta_image":619},"Diagrams.Design - Product Updates",[260,302,313,330,340,362,374,395,404,438,449,484,494,509,522,549,561,576,588],{"variation":20,"version":21,"items":261,"primary":262,"id":301,"slice_type":50,"slice_label":51},[],{"content":263},[264,269,274,277,280,283,286,289,292,295],{"type":26,"text":265,"spans":266,"direction":33},"What's New in Diagrams.Design | October 2026",[267],{"start":30,"end":268,"type":32},44,{"type":35,"text":270,"spans":271,"direction":33},"A refreshed workspace, more creative freedom, powerful editing tools, and a faster way to bring your diagrams to life.",[272],{"start":30,"end":273,"type":32},118,{"type":35,"text":275,"spans":276,"direction":33},"We've been busy behind the scenes. Over the past few months, we've been rethinking and rebuilding parts of Diagrams.Design to make creating animated diagrams simpler, faster, and more enjoyable.",[],{"type":35,"text":278,"spans":279,"direction":33},"Some changes are immediately noticeable. Others are small improvements that make a surprisingly big difference when you're working on a diagram.",[],{"type":35,"text":281,"spans":282,"direction":33},"From a redesigned workspace and new shapes to reusable colour palettes, smarter editing tools, and improved exports, there's quite a lot to share.",[],{"type":35,"text":284,"spans":285,"direction":33},"Here's what's new.",[],{"type":72,"text":287,"spans":288,"direction":33},"1. A refreshed workspace, in light and dark",[],{"type":35,"text":290,"spans":291,"direction":33},"Your workspace has a new look.",[],{"type":35,"text":293,"spans":294,"direction":33},"We've redesigned the dashboard to bring your diagrams, templates, colour palettes, and image library together in one place. Everything you need to start creating or pick up where you left off is easier to find.",[],{"type":35,"text":296,"spans":297,"direction":33},"And because everyone works differently, Diagrams.Design now supports both light and dark modes. Choose whichever feels more comfortable. Your preference carries through the dashboard, editor, and export experience.",[298],{"start":299,"end":300,"type":32},40,94,"rich_text$3dc3e34f-068e-47da-94e4-369dbdfc9ddb",{"variation":303,"version":53,"items":304,"primary":305,"id":312,"slice_type":66,"slice_label":51},"medium",[],{"post_image":306},{"dimensions":307,"alt":308,"copyright":51,"url":309,"id":310,"edit":311},{"width":170,"height":171},"Diagrams.Design in light and dark mode","https://images.prismic.io/diagrams-design-blog/JnPoM98zuMfUtW1K_light-dark-dd.png?auto=format,compress","JnPoM98zuMfUtW1K",{"x":30,"y":30,"zoom":63,"background":64},"post_image$a635a147-1c10-4d6c-92ab-d91e7c6f40f2",{"variation":20,"version":21,"items":314,"primary":315,"id":329,"slice_type":50,"slice_label":51},[],{"content":316},[317,320,323],{"type":72,"text":318,"spans":319,"direction":33},"2. A cleaner editor that keeps you focused",[],{"type":35,"text":321,"spans":322,"direction":33},"The canvas is where ideas take shape. We've made several improvements to help you stay focused on creating rather than navigating the interface. The updated editor brings shape properties, styling, animation settings and canvas controls closer to where you work.",[],{"type":35,"text":324,"spans":325,"direction":33},"We've also added a handy option to reverse the animation order of an entire diagram, saving you from having to rearrange each animation individually. And of course, the editor now works in both light and dark modes.",[326],{"start":327,"end":328,"type":32},35,83,"rich_text$e5117af2-d200-491a-9471-44164f1d1c91",{"variation":303,"version":53,"items":331,"primary":332,"id":339,"slice_type":66,"slice_label":51},[],{"post_image":333},{"dimensions":334,"alt":335,"copyright":51,"url":336,"id":337,"edit":338},{"width":170,"height":171},"Diagrams.Design editor, canvas, toolbar and properties","https://images.prismic.io/diagrams-design-blog/4p7V8WkYCDaSHbfz_Screenshot2026-10-07at12.55.46pm.png?auto=format,compress","4p7V8WkYCDaSHbfz",{"x":30,"y":30,"zoom":63,"background":64},"post_image$08b2bc80-7c9b-4eed-a868-19f19343b7cd",{"variation":20,"version":21,"items":341,"primary":342,"id":361,"slice_type":50,"slice_label":51},[],{"content":343},[344,347,353,356],{"type":72,"text":345,"spans":346,"direction":33},"3. Custom colour palettes",[],{"type":35,"text":348,"spans":349,"direction":33},"Have a favourite set of colours you use across your projects? You no longer need to recreate them for every diagram. With Custom Colour Palettes, you can create, save and manage your own collections of colours.",[350],{"start":351,"end":352,"type":32},122,144,{"type":35,"text":354,"spans":355,"direction":33},"Once saved, your palettes are available directly inside the editor, making it easier to keep your diagrams visually consistent. Switching palettes won't unexpectedly change colours already applied to your diagram. Your existing design stays intact until you decide to change it. Whether you're following brand guidelines or simply have a favourite combination that works for your idea, your colours are always within reach.",[],{"type":35,"text":357,"spans":358,"direction":33},"Custom colour palettes are available with Pro.",[359],{"start":30,"end":360,"type":185},46,"rich_text$fbc4e5ed-8e64-4c04-bcb8-93386959bc74",{"variation":303,"version":53,"items":363,"primary":364,"id":373,"slice_type":66,"slice_label":51},[],{"post_image":365},{"dimensions":366,"alt":369,"copyright":51,"url":370,"id":371,"edit":372},{"width":367,"height":368},2936,1668,"A screenshot of the palette management page","https://images.prismic.io/diagrams-design-blog/5bSiJRCA-1d2lVPn_Screenshot2026-10-04at1.06.38pm.png?auto=format,compress","5bSiJRCA-1d2lVPn",{"x":30,"y":30,"zoom":63,"background":64},"post_image$fab8f0cd-09a9-4f93-affa-90d3a651ccb8",{"variation":20,"version":21,"items":375,"primary":376,"id":394,"slice_type":50,"slice_label":51},[],{"content":377},[378,381,386,389],{"type":72,"text":379,"spans":380,"direction":33},"4. Bring your own images and logos",[],{"type":35,"text":382,"spans":383,"direction":33},"Sometimes a diagram needs more than shapes and arrows. You can now upload your own images and logos to a personal Image Library and reuse them across diagrams.",[384],{"start":385,"end":48,"type":32},114,{"type":35,"text":387,"spans":388,"direction":33},"Once uploaded, your images remain available in your account. You can select them directly from a diagram's icon settings without having to upload the same file again. This is especially useful when creating branded diagrams, product explanations, presentations, or educational content.",[],{"type":35,"text":390,"spans":391,"direction":33},"The personal image library is available with Pro.",[392],{"start":30,"end":393,"type":185},49,"rich_text$4867cda1-cf82-4ecd-bfa7-a570fd3eb304",{"variation":303,"version":53,"items":396,"primary":397,"id":403,"slice_type":66,"slice_label":51},[],{"post_image":398},{"dimensions":399,"alt":51,"copyright":51,"url":400,"id":401,"edit":402},{"width":170,"height":171},"https://images.prismic.io/diagrams-design-blog/dKJhxVEDUstV2ezA_image-gallery-light.png?auto=format,compress","dKJhxVEDUstV2ezA",{"x":30,"y":30,"zoom":63,"background":64},"post_image$dc6cfb20-d051-45c1-b4fd-4c31e490a9a4",{"variation":20,"version":21,"items":405,"primary":406,"id":437,"slice_type":50,"slice_label":51},[],{"content":407},[408,411,415,418,422,425,428,431,434],{"type":72,"text":409,"spans":410,"direction":33},"5. New shapes: Pie and Donut",[],{"type":35,"text":412,"spans":413,"direction":33},"We've introduced two new shapes to help you communicate proportions and comparisons visually. Pie and Donut shapes let you create segmented visuals directly on your canvas.",[414],{"start":300,"end":385,"type":32},{"type":35,"text":416,"spans":417,"direction":33},"You can:",[],{"type":419,"text":420,"spans":421,"direction":33},"list-item","Add and name individual segments.",[],{"type":419,"text":423,"spans":424,"direction":33},"Assign colours to each segment.",[],{"type":419,"text":426,"spans":427,"direction":33},"Reorder segments to suit your composition.",[],{"type":419,"text":429,"spans":430,"direction":33},"Animate the shapes as part of your diagram.",[],{"type":419,"text":432,"spans":433,"direction":33},"Adjust the centre opening of a donut shape.",[],{"type":35,"text":435,"spans":436,"direction":33},"Whether you're explaining a process breakdown, illustrating a distribution or presenting a simple comparison, these shapes give you more ways to tell your story.",[],"rich_text$5653a37b-f191-48f5-8d45-3e3caa64c696",{"variation":303,"version":53,"items":439,"primary":440,"id":448,"slice_type":66,"slice_label":51},[],{"post_image":441},{"dimensions":442,"alt":444,"copyright":51,"url":445,"id":446,"edit":447},{"width":443,"height":59},1920,"An animated GIF showing pie and donut shapes","https://images.prismic.io/diagrams-design-blog/3tB3NmxaICNa1LRk_pie-donut.gif?auto=format,compress","3tB3NmxaICNa1LRk",{"x":30,"y":30,"zoom":63,"background":64},"post_image$716852e5-b35f-48aa-ab51-2a381599e76a",{"variation":20,"version":21,"items":450,"primary":451,"id":483,"slice_type":50,"slice_label":51},[],{"content":452},[453,456,459,464,467,472,475,480],{"type":72,"text":454,"spans":455,"direction":33},"6. Small editing tools. Big time savings.",[],{"type":35,"text":457,"spans":458,"direction":33},"Some of the most useful improvements in this release aren't flashy. They're the tools that save you time when working with multiple shapes. We've expanded the editor's selection and arrangement capabilities.",[],{"type":35,"text":460,"spans":461,"direction":33},"Copy, clone, and style",[462],{"start":30,"end":463,"type":32},22,{"type":35,"text":465,"spans":466,"direction":33},"Duplicate selected shapes, copy a shape's styling, and apply that styling to other shapes without recreating it manually.",[],{"type":35,"text":468,"spans":469,"direction":33},"Align and distribute",[470],{"start":30,"end":471,"type":32},20,{"type":35,"text":473,"spans":474,"direction":33},"Precisely align multiple shapes to the left, centre, right, top, middle, or bottom. Distribute shapes horizontally or vertically to create balanced layouts.",[],{"type":35,"text":476,"spans":477,"direction":33},"Control layer order",[478],{"start":30,"end":479,"type":32},19,{"type":35,"text":481,"spans":482,"direction":33},"Move shapes forward or backward to control how they overlap on the canvas.",[],"rich_text$d4ce585a-04a9-4222-900a-d2440bea0990",{"variation":165,"version":53,"items":485,"primary":486,"id":493,"slice_type":66,"slice_label":51},[],{"post_image":487},{"dimensions":488,"alt":489,"copyright":51,"url":490,"id":491,"edit":492},{"width":170,"height":171},"A screenshot of multiple selected shapes with the context menu open, highlighting alignment, distribution, cloning, and styling actions.","https://images.prismic.io/diagrams-design-blog/KFGvye0gKfh7UmSl_context-menu.png?auto=format,compress","KFGvye0gKfh7UmSl",{"x":30,"y":30,"zoom":63,"background":64},"post_image$17d09a64-d90a-4564-8402-9a3041fdbb85",{"variation":20,"version":21,"items":495,"primary":496,"id":508,"slice_type":50,"slice_label":51},[],{"content":497},[498,502],{"type":35,"text":499,"spans":500,"direction":33},"Arrange in a Circle",[501],{"start":30,"end":479,"type":32},{"type":35,"text":503,"spans":504,"direction":33},"This one deserves a special mention. Select multiple shapes, choose Arrange in Circle, and Diagrams.Design will position them around a circle for you. You can control the circle's radius and clockwise order, making it especially useful for creating radial diagrams, cycles, and circular processes. Less time positioning shapes. More time communicating your ideas.",[505],{"start":506,"end":507,"type":185},68,85,"rich_text$0d415eac-ab8a-4e30-a3bd-24c38d44da55",{"variation":20,"version":53,"items":510,"primary":511,"id":521,"slice_type":66,"slice_label":51},[],{"post_image":512},{"dimensions":513,"alt":514,"copyright":51,"url":515,"id":516,"edit":517},{"width":170,"height":171},"Arrange in Circle","https://images.prismic.io/diagrams-design-blog/dUDh600jqR26VzaT_arrange-in-circle-blog-post.png?auto=format%2Ccompress&rect=472%2C341%2C1988%2C1293&w=2940&h=1912","dUDh600jqR26VzaT",{"x":518,"y":519,"zoom":520,"background":64},472,341,1.4784563308581713,"post_image$b1bf989c-29a4-4d9b-ba7e-2c3b6b689028",{"variation":20,"version":21,"items":523,"primary":524,"id":548,"slice_type":50,"slice_label":51},[],{"content":525},[526,529,535,538,543],{"type":72,"text":527,"spans":528,"direction":33},"7. Better exports, from canvas to finished file",[],{"type":35,"text":530,"spans":531,"direction":33},"Creating a diagram is only half the story. Sharing it should be just as straightforward. We've revised the export experience with a native export engine designed for faster, smoother output. You can export your work as images or videos that are ready to use in presentations, tutorials, articles and other content.",[532],{"start":533,"end":534,"type":32},132,189,{"type":35,"text":536,"spans":537,"direction":33},"We've expanded the available export resolutions.",[],{"type":419,"text":539,"spans":540,"direction":33},"720p and 1080p are available on Free accounts.",[541],{"start":30,"end":542,"type":32},14,{"type":419,"text":544,"spans":545,"direction":33},"2K and 4K are available with a paid plan.",[546],{"start":30,"end":547,"type":32},9,"rich_text$b2ebbb59-54a4-4163-9b34-43fe6b7f33f8",{"variation":20,"version":53,"items":550,"primary":551,"id":560,"slice_type":66,"slice_label":51},[],{"post_image":552},{"dimensions":553,"alt":556,"copyright":51,"url":557,"id":558,"edit":559},{"width":554,"height":555},1560,1658,"Export interface showing format and resolution options","https://images.prismic.io/diagrams-design-blog/7vtf1FcN-UOltnje_export-vertical-dark.png?auto=format,compress","7vtf1FcN-UOltnje",{"x":30,"y":30,"zoom":63,"background":64},"post_image$858de9aa-b2e1-4b92-8108-90710152ed36",{"variation":20,"version":21,"items":562,"primary":563,"id":575,"slice_type":50,"slice_label":51},[],{"content":564},[565,571],{"type":35,"text":566,"spans":567,"direction":33},"And there's something new: GIF export.",[568],{"start":569,"end":570,"type":32},27,37,{"type":35,"text":572,"spans":573,"direction":33},"With Pro, short animations under eight seconds can be exported as looping GIFs, making them easy to share in places where a full video isn't necessary. Whether you need a quick visual for a blog post or a high-resolution animation for a presentation or social media, you have more flexibility in how you share your work.",[574],{"start":569,"end":360,"type":32},"rich_text$effcf6d0-61ca-4898-a4e7-baa72da6b00c",{"variation":20,"version":53,"items":577,"primary":578,"id":587,"slice_type":66,"slice_label":51},[],{"post_image":579},{"dimensions":580,"alt":583,"copyright":51,"url":584,"id":585,"edit":586},{"width":581,"height":582},333,500,"A short looping GIF of animated diagram exported from Diagrams.Design","https://images.prismic.io/diagrams-design-blog/nucdprCUqewlInz2_create-animate-export.gif?auto=format%2Ccompress&rect=0%2C0%2C719%2C1080&w=333&h=500","nucdprCUqewlInz2",{"x":30,"y":30,"zoom":63,"background":64},"post_image$e39e2020-afca-4330-b42c-91c127c8ec86",{"variation":20,"version":21,"items":589,"primary":590,"id":618,"slice_type":50,"slice_label":51},[],{"content":591},[592,595,598,602,605,608,615],{"type":72,"text":593,"spans":594,"direction":33},"Still the same idea. Just a better way to bring it to life.",[],{"type":35,"text":596,"spans":597,"direction":33},"When we started Diagrams.Design, the idea was simple: make it easier to create diagrams that don't have to remain static. We wanted to make animation approachable, without complicated timelines or specialised motion-design skills. And that hasn't changed. You still create your diagram, decide the order in which its elements appear and let Diagrams.Design bring it to life.",[],{"type":35,"text":599,"spans":600,"direction":33},"No messy timelines. Just numbered order.",[601],{"start":30,"end":299,"type":32},{"type":35,"text":603,"spans":604,"direction":33},"What has changed is everything around that experience: a more comfortable workspace, more control over your designs, faster editing and better ways to export and share your work. We're excited to see what you create with it.",[],{"type":35,"text":606,"spans":607,"direction":33},"If it's been a while since you last opened Diagrams.Design, we'd love for you to come back and give it another try.",[],{"type":35,"text":609,"spans":610,"direction":33},"Open Diagrams.Design →",[611,614],{"start":30,"end":463,"type":224,"data":612},{"link_type":226,"url":613,"target":228},"https://diagrams.design",{"start":30,"end":463,"type":32},{"type":35,"text":231,"spans":616,"direction":33},[617],{"start":30,"end":234,"type":185},"rich_text$fecfbdd7-7abc-445e-bbc9-2fb67bbf10c8",{"dimensions":620,"alt":621,"copyright":51,"url":622,"id":310,"edit":623},{"width":240,"height":241},"A refreshed Diagrams.Design workspace, more creative freedom, powerful editing tools","https://images.prismic.io/diagrams-design-blog/JnPoM98zuMfUtW1K_light-dark-dd.png?auto=format,compress&rect=0,184,2940,1544&w=2400&h=1260",{"x":30,"y":244,"zoom":63,"background":64},1791377191291]