You can embed LucidChart diagrams, such as network diagrams, directly in your Hudu documentation. Diagrams can be added to asset cards using an Embed field in the asset layout, or added to any area that uses the Notion-style editor, including KB articles, processes, and company Quick Notes.
Visit Asset Layouts for additional information on creating and editing asset layouts.
Prerequisites
- A LucidChart account with access to the diagram you want to embed.
- To embed diagrams on asset cards, an asset layout to hold the diagrams.
Copy the embed code from LucidChart
- Log in to your LucidChart account and open the document you want to embed.
- Click Share in the top right corner of the document.
- In the modal that appears, click the Embed icon under Collaborators to copy the embed code.
Embed a diagram on an asset card
- In Hudu, edit the asset layout and add a field with the type Embed.
- Save the asset layout.
- Open or create an asset that uses the layout (for example, a Network asset) and paste the LucidChart embed code into the Embed field.
- Save the asset. The diagram now displays directly on the asset card.
Embed a diagram in the Notion-style editor
LucidChart diagrams can also be embedded anywhere the Notion-style editor is used, including KB articles, processes, and company Quick Notes. Embeds must be added through the editor's source code view.
- Open the KB article, process, or Quick Note you want to edit.
- Click the Source code icon (</>) in the top right of the editor toolbar.
- Paste the LucidChart embed code where you want the diagram to appear.
- Click the Source code icon again to return to the editor and confirm the diagram displays, then save your changes.
Visit Notion-Style Editor for additional information on using the editor.
FAQ
On asset cards through an Embed field in the asset layout, and in any area that uses the Notion-style editor, including KB articles, processes, and company Quick Notes.
Yes. Adjust the width and height values in the embed code before pasting it into Hudu.
Troubleshooting
The embed code was likely added to a code block. Code blocks only display code and do not render it, regardless of the selected language. Delete the code block, then click the Source code icon (</>) in the editor toolbar and paste the embed code there.