# Using IcePanel

Copy as Markdown[View as Markdown](/docs/development/components/diagram-syntax/icepanel.md)

***

**Added in** `eventcatalog@3.2.1`

EventCatalog supports embedding [IcePanel](https://icepanel.io/) diagrams in all your markdown files.

IcePanel is a collaborative diagramming tool designed for visualizing software architecture using the [C4 model](https://c4model.com/). It helps teams create interactive system context, container, and component diagrams that can be shared and explored.

![Example output](/assets/images/ice-panel-5c454588818acf2d27e95d729296b296.png)

## Using IcePanel in EventCatalog[​](#using-icepanel-in-eventcatalog "Direct link to Using IcePanel in EventCatalog")

To embed an IcePanel diagram, use the `<IcePanel />` component in any markdown file.

### Getting your IcePanel share URL[​](#getting-your-icepanel-share-url "Direct link to Getting your IcePanel share URL")

1. Open your diagram in IcePanel
2. Click the **Share** button
3. Copy the share/embed URL (it should look like `https://s.icepanel.io/...`)

### Basic Example[​](#basic-example "Direct link to Basic Example")

```
---
# your frontmatter
---

<IcePanel url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB" />
```

### Example with title and description[​](#example-with-title-and-description "Direct link to Example with title and description")

```
---
# your frontmatter
---

<IcePanel
  url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB"
  title="System Architecture"
  description="Overview of our microservices architecture showing how services communicate."
  height="800"
/>
```

### Full screen mode[​](#full-screen-mode "Direct link to Full screen mode")

Each embedded IcePanel diagram includes a full screen button, allowing your teams to explore the diagram in detail without leaving EventCatalog.

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

| Name          | Type     | Default | Required | Description                                                                                                    |
| ------------- | -------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------- |
| `url`         | `string` |         | Yes      | The share URL of the IcePanel diagram. To get the URL, click "Share" in IcePanel and copy the embed/share URL. |
| `title`       | `string` |         | No       | The title to display above the diagram.                                                                        |
| `description` | `string` |         | No       | A description to display below the title.                                                                      |
| `height`      | `string` | `600`   | No       | The height of the embedded diagram in pixels.                                                                  |
| `width`       | `string` | `100%`  | No       | The width of the embedded diagram.                                                                             |

### More resources[​](#more-resources "Direct link to More resources")

* [IcePanel documentation](https://docs.icepanel.io/) - Learn more about IcePanel and how to use it
* [C4 model](https://c4model.com/) - Learn about the C4 model for visualizing software architecture
* [IcePanel component reference](/docs/development/components/external-diagram-embeds/icepanel.md) - Full component documentation