# Automating Diagram Generation from Text
source: https://developer.mastercard.com/blog/automating-diagram-generation-from-text/index.md

Authors: Paul Bland. Within Mastercard, we have the regular need to create sequence diagrams. These diagrams are used within documentation, both internally and externally, as a tool to communicate the architecture of a software system. They can be used to describe both the internal workings of a system, and also its interactivity with other external systems. Why utilize diagrams in tech docs? These diagrams are utilized by several groups of users: the engineers involved in building a system, the third-party engineers involved in the implementation of our payment solutions within their own organizations, and also non-engineers who require detailed knowledge of a system and how its elements interact. An example use case for a sequence diagram could be to describe the process of a user on their mobile device who wants to pay for an item within a store electronically. The diagram would describe the flow of data between the user, their device, the servers, APIs, payment gateway, merchant etc. Why mermaid? To solve this problem, we chose to utilize a software tool called "mermaid". mermaid (written in lowercase) is a JavaScript-based open-source application that generates various UML-based diagrams, including sequence diagrams. Diagrams are defined in an easy-to-use, plain text language closely resembling English. While other options exist, we chose mermaid for two important reasons. Firstly, it is written in JavaScript which means it neatly integrates with existing web systems. Most importantly however mermaid was chosen because it is open-source. This means we were able to extend its core functionality to precisely suit our needs. mermaid offered many features that our sequence diagrams required, and for the features it lacked we were simply able to write our own. Our additions included creating a new theme to define visual elements such as colors and typefaces to match Mastercard's design language, adding images to accompany actor elements within the diagram, adding labeled dividers and sections to visually separate sections within the diagram, adding formatting options for text elements, adding automatically generated sequence numbers, and also adding the ability to download the generated diagram file as either an SVG or PNG. The image file can then be then embedded in other documents, and an SVG can even be edited by a vector graphics program such as Adobe Illustrator. Example of sequence diagram generated by mermaid Example of flow diagram generated by mermaid The ability to customize and extend mermaid helped us solve our problem. The other important aspect of open source software is not just benefiting from others work, but also allowing others to benefit from ours. We are currently in the process of having our additions and upgrades to mermaid integrated back in to the original source code via pull requests, so that other users may also benefit from our work. As of this writing, two of our pull requests have been merged into the master branch, and are now officially a part of the mermaid software.