> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traycer.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagrams

> Add, edit, and export Mermaid diagrams in artifacts.

export const FeatureVideo = ({src, label}) => {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const video = videoRef.current;
    if (!video || typeof IntersectionObserver === "undefined") {
      return undefined;
    }
    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) {
      return undefined;
    }
    let pausingOffScreen = false;
    let pausedByReader = false;
    const onPause = () => {
      if (pausingOffScreen) {
        pausingOffScreen = false;
        return;
      }
      pausedByReader = true;
    };
    const onPlay = () => {
      pausedByReader = false;
    };
    video.addEventListener("pause", onPause);
    video.addEventListener("play", onPlay);
    const observer = new IntersectionObserver(entries => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          if (!pausedByReader) {
            video.play().catch(() => {});
          }
        } else if (!video.paused) {
          pausingOffScreen = true;
          video.pause();
        }
      }
    }, {
      threshold: 0.25
    });
    observer.observe(video);
    return () => {
      observer.disconnect();
      video.removeEventListener("pause", onPause);
      video.removeEventListener("play", onPlay);
    };
  }, []);
  return <video ref={videoRef} className="w-full aspect-video rounded-xl" controls loop muted playsInline preload="metadata" aria-label={label}>
      <source src={src} type="video/mp4" />
      Unable to load video.
    </video>;
};

<FeatureVideo src="https://assets.traycer.ai/docs/videos/mermaid-render.mp4" label="Open, zoom, pan, and export a Mermaid diagram" />

A `mermaid` code block in an artifact renders as an inline diagram. Use one when a flow, sequence, or relationship is easier to understand as a picture.

## Add a Diagram

Either:

* **Ask an agent.** For example: "Add a Mermaid sequence diagram of the sign-in flow to the tech plan." Agents are told to use Mermaid for flows and architecture.
* **Write one yourself.** In an artifact, type a code fence named `mermaid`, as you would in Markdown. After a short pause it turns into a diagram block. An empty block opens in the source editor with a starter diagram.

````markdown theme={null}
```mermaid
graph TD
  A[Request] --> B{Signed in?}
  B -- Yes --> C[Load Task]
  B -- No --> D[Show sign-in]
```
````

If the source has an error, the block shows "Mermaid parse error" instead of the diagram.

## Block Controls

Hover a diagram to show its toolbar:

| Control | What it does |
| - | - |
| **Edit source** / **Close source** | Opens or closes the Mermaid source editor. Editors and Owners only. |
| **Copy code** | Copies the Mermaid source. |
| **Download PNG** | Saves the diagram as an image. |

The source editor saves as you type. Press ⌘Enter / Ctrl+Enter or Esc to close it; your changes are kept either way.

## Fullscreen

Click a diagram to open it fullscreen. The view has **Copy code**, **Download PNG**, and zoom controls: **Zoom out (-)**, **Zoom in (+)**, **Fit to screen (F)**, and **Actual size (0)**. The keys in the labels work while the zoom controls have focus.

* Drag to pan.
* Double-click to switch between fit to screen and actual size.
* On a trackpad, pinch to zoom and scroll to pan. The mouse wheel doesn't zoom.
* Press Esc to close.

## Diagrams Elsewhere

* The artifact's file on disk keeps the diagram as a `mermaid` code block. See [Artifacts on Disk](/panels/artifacts#artifacts-on-disk).
* A PDF export shows the diagram's source instead of the image. See [Export](/panels/artifacts/export).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.