Backstage TechDocs - How to embed lucid chart diagrams

Published on August 3rd, 2021 by Brian Fletcher

TechDocs is the core Backstage feature which transforms markdown documentation into HTML and displays it inside Backstage where your engineering teams can find it.

You can easily embed diagrams from lucid charts and other external sources in techdocs. Start by exporting the generated iframe from the external application. For example if you are using lucid charts you can click the Share button in the top right.

button.png

This will show a dialog as follows.

dialog.png

Click advanced and then click embed.

embed-dialog.png

You can choose to adjust the size of the embedded diagrams.

Copy the html snippet and click the “Activate Embedded Code” button.

embed-code-button.png

Now copy the code snippet into your techdocs files as it is and you will get diagrams in your techdocs that update when the diagrams are changed in lucid chart.

embedded-diagram-in-techdocs.png

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.

We will never sell or share your email address.