How to Embed Figma, YouTube, and Mermaid Diagrams in One Document

Modern documents are not just text. Product specs include Figma mockups. Technical guides need architecture diagrams. Training materials embed video tutorials. The best documents bring all of these together in a single, coherent page.

This tutorial shows you how to embed rich media — Figma designs, YouTube videos, and Mermaid diagrams — directly into your documents using Quixli.

Why Embeds Matter for Documentation

Traditional documents force you to link out to external content. This creates problems:

• Context switching — Readers leave your document to view the design or video, and may not come back

• Broken links — External URLs change or expire, leaving dead references in your docs

• Lost context — A Figma link without the surrounding explanation loses meaning

• Version mismatch — The linked content may have changed since you wrote the document

Inline embeds solve all of these by bringing the content directly into your document.

Embedding Figma Designs

Figma embeds are perfect for product specs, design reviews, and client presentations.

How to embed a Figma design in Quixli:

1. Open your Figma file and click "Share"

2. Copy the embed link (or the regular file URL)

3. In Quixli, type /figma or use the embed block

4. Paste the Figma URL

5. The design renders inline with interactive zoom and pan

Pro tips for Figma embeds:

• Link to specific frames rather than the entire file for focused context

• Set view-only permissions in Figma to prevent unauthorized editing

• Figma embeds update automatically — when the design changes, the document reflects it

• Use Figma embeds in proposals to show design concepts without sending separate files

Embedding YouTube Videos

Video embeds transform static documents into interactive learning resources.

How to embed a YouTube video:

1. Copy the YouTube video URL from your browser

2. In Quixli, type /youtube or use the video embed block

3. Paste the URL

4. The video player appears inline with full playback controls

Best use cases for video embeds:

• Onboarding documents with walkthrough videos

• Product documentation with feature demos

• Training materials with instructional content

• Proposals with client-facing video introductions

• Meeting notes with recorded session links

Creating Mermaid Diagrams

Mermaid is a text-based diagramming language that generates flowcharts, sequence diagrams, Gantt charts, and more — directly from simple syntax.

How to create a Mermaid diagram:

1. In Quixli, type /diagram or /mermaid

2. A code editor opens with a preview panel

3. Write your diagram using Mermaid syntax

4. The preview updates in real-time as you type

Example — a simple flowchart:

graph TD
    A[User visits page] --> B{Logged in?}
    B -->|Yes| C[Show dashboard]
    B -->|No| D[Show login form]
    D --> E[User enters credentials]
    E --> F{Valid?}
    F -->|Yes| C
    F -->|No| G[Show error]

Supported Mermaid diagram types:

• Flowcharts — Process flows, decision trees, system architectures

• Sequence diagrams — API interactions, user flows, service communication

• Gantt charts — Project timelines, sprint planning, release schedules

• Class diagrams — Data models, entity relationships

• State diagrams — State machines, workflow states

• Pie charts — Data distribution and breakdowns

Combining Embeds in a Single Document

The real power comes from combining these embeds. Here is an example document structure for a product spec:

1. Overview — A brief paragraph explaining the feature

2. Architecture — A Mermaid sequence diagram showing the system flow

3. Design — An embedded Figma frame showing the UI mockups

4. Demo — An embedded YouTube video showing the prototype in action

5. Implementation — Code blocks with key implementation details

6. Timeline — A Mermaid Gantt chart with development milestones

This single document replaces a scattered collection of Figma links, Loom videos, Confluence pages, and Jira tickets.

Rich embeds transform documents from static text into interactive, self-contained resources. Try Quixli and bring your designs, videos, and diagrams together in one place.