# \<Lucid />

Copy as Markdown[View as Markdown](/docs/development/components/external-diagram-embeds/lucid.md)

***

**Added in** `eventcatalog@2.34.4`

The `<Lucid />` component renders a [Lucid diagram](https://lucid.app/) in your documentation.

### Support[​](#support "Direct link to Support")

The `<Lucid />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction.md).

### Usage[​](#usage "Direct link to Usage")

1. Include the `<Lucid />` component inside the markdown
   <!-- -->
   * e.g `/events/MyEvent/index.mdx`

**Basic Example**

```
---
#event frontmatter
---

<Lucid diagramId="e29f42a0-67e2-4f80-b0d7-6922bb7dd9c5" />
```

### Output example in EventCatalog[​](#output-example-in-eventcatalog "Direct link to Output example in EventCatalog")

![Example output](/assets/images/lucid-c3a21b0d727c8e0653c6d41f9fc06a38.png)

* [Example: View demo in a domain page](https://demo.eventcatalog.dev/docs/domains/Orders/0.0.3)
* [Example: View demo in custom documentation page](https://demo.eventcatalog.dev/docs/custom/guides/event-storming/01-index)

### Props[​](#props "Direct link to Props")

| Name        | Type     | Default | Required | Description                                                                                                                                                |
| ----------- | -------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `diagramId` | `string` |         | Yes      | The ID of the Lucid diagram to embed. You can find the ID in the URL of the Lucid diagram or by clicking "Share" in Lucid and copying the ID from the URL. |