Blog Home

Rebooting Diagrams

by -

Several months ago we shared the first interactive diagram made with the Diagramy Editor. Since then, we’ve received lots of great feedback about what it did well, and how it could be improved.

In this post I wanted to share more information about where we are, and where we’re going.

Taking a step back, the first problem we wanted to solve with Diagramy was to make diagrams easier to explain and understand. We wanted to use these interactive diagrams as teaching aids in our online courses. The goal was to give students a more dynamic learning experience, allowing them to explore the content and “connect the dots” at their own pace.

As we shared our creation, we started to see a bigger problem to solve. The underlying problem we saw with most diagramming tools is that they produce a static, isolated image. A creator does the work to design something in an editor, and then that knowledge stays captured in a picture, and we have to move to other tools to actually do work.

We then asked ourselves what seems to be an obvious question now. What if we could create a flexible way to turn diagrams into other things? Things like hard to write configuration files, or even whole applications?

That question led us to evolve our editing tool, turning it into a powerful productivity platform. Here are the main new features that we’re building out.

Better Diagram Explainability

Diagrams are often complex, with lots of components that together tell a story. Traditionally, authors have had to explain their diagrams through narration, or by writing lots of long-form text. This can make it difficult for reader to understand what’s going on.

Diagramy is different. Authors are able to make each component of their diagram interactive, with a beautiful, modern content editor. Authors can write rich content using markdown, add things like code highlighting, pictures, videos, and more.

enter image description here

Smart Stencils

In most diagram editors, stencils are nothing more than visual icons. They are part of a static picture.

In Diagramy, stencils are smarter. They can be configured to have a rich description for educational purposes. They also can be configured to to allow forms that accept user input. This is really useful if you want to give users the ability to generate certain outputs from your diagrams.

Anyone will be able to use the built-in library of smart stencils, or create their own.

enter image description here

Diagram Functions

Diagram Functions are one of the things we’re most excited about. They allow you to create functions that process the diagram to create some kind of output. For example, if you want to deploy a cloud based architecture on AWS, you could use the AWS Smart Stencils to design and configure your architecture. Then use the CloudFormation Diagram Function to create the yaml configuration file.

There are endless possibilities with a feature like this. You could: Create cloud “infrastructure as code” templates for AWS, Google, and Azure Build project starter kits in both frontend and backend languages Generate client deliverables in real-time

enter image description here

These are some of the bigger features that we’re working on. There are many others that we think will help Diagramy become an invaluable productivity tool.

Follow us on Twitter to stay up to date.

Add a Comment

Please Sign Up or Sign In to leave a comment.