From 1a568c71a56f0dce853d3b48a91001cffe8b1a3c Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:19 +0000
Subject: [PATCH 01/14] Update components/graphs.mdx

---
 components/graphs.mdx | 385 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 385 insertions(+)
 create mode 100644 components/graphs.mdx

diff --git a/components/graphs.mdx b/components/graphs.mdx
new file mode 100644
index 000000000..37a090fe9
--- /dev/null
+++ b/components/graphs.mdx
@@ -0,0 +1,385 @@
+---
+title: "Graphs"
+description: "Display interactive charts and data visualizations with the Graph component."
+keywords: ["graphs", "charts", "data visualization", "line chart", "bar chart", "pie chart"]
+---
+
+Use the `<Graph>` component to create interactive charts and data visualizations in your documentation. Graphs help users understand data trends, comparisons, and distributions at a glance.
+
+## Basic usage
+
+Wrap your data configuration in a `<Graph>` component and specify the chart type.
+
+<Graph type="line" title="Monthly revenue">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Apr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Monthly revenue">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Apr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+```
+
+## Chart types
+
+### Line chart
+
+Display trends over time or continuous data.
+
+<Graph type="line" title="User growth" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Apr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="User growth" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Apr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+```
+
+### Bar chart
+
+Compare values across categories.
+
+<Graph type="bar" title="Sales by region" xKey="region" yKey="sales">
+  {[
+    { region: "North", sales: 4200 },
+    { region: "South", sales: 3800 },
+    { region: "East", sales: 5100 },
+    { region: "West", sales: 4700 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Sales by region" xKey="region" yKey="sales">
+  {[
+    { region: "North", sales: 4200 },
+    { region: "South", sales: 3800 },
+    { region: "East", sales: 5100 },
+    { region: "West", sales: 4700 }
+  ]}
+</Graph>
+```
+
+### Area chart
+
+Show cumulative totals or volume over time.
+
+<Graph type="area" title="API requests" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="area" title="API requests" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+```
+
+### Pie chart
+
+Show proportions of a whole.
+
+<Graph type="pie" title="Traffic sources">
+  {[
+    { source: "Organic", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Referral", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Traffic sources">
+  {[
+    { source: "Organic", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Referral", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+```
+
+### Donut chart
+
+A pie chart with a center cutout.
+
+<Graph type="donut" title="Browser usage">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Other", value: 6 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="donut" title="Browser usage">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Other", value: 6 }
+  ]}
+</Graph>
+```
+
+## Multiple series
+
+Display multiple data series on the same chart for comparison.
+
+<Graph type="line" title="Revenue vs Expenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Apr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenue", color: "#22c55e" },
+      { key: "expenses", label: "Expenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="line" title="Revenue vs Expenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Apr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenue", color: "#22c55e" },
+      { key: "expenses", label: "Expenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+```
+
+## Stacked bar chart
+
+Show composition within categories.
+
+<Graph type="bar" title="Quarterly sales by product" xKey="quarter" stacked>
+  {{
+    data: [
+      { quarter: "Q1", productA: 4000, productB: 2400, productC: 1800 },
+      { quarter: "Q2", productA: 3000, productB: 1398, productC: 2200 },
+      { quarter: "Q3", productA: 5000, productB: 3800, productC: 2800 },
+      { quarter: "Q4", productA: 4500, productB: 3908, productC: 3200 }
+    ],
+    series: [
+      { key: "productA", label: "Product A" },
+      { key: "productB", label: "Product B" },
+      { key: "productC", label: "Product C" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Quarterly sales by product" xKey="quarter" stacked>
+  {{
+    data: [
+      { quarter: "Q1", productA: 4000, productB: 2400, productC: 1800 },
+      { quarter: "Q2", productA: 3000, productB: 1398, productC: 2200 },
+      { quarter: "Q3", productA: 5000, productB: 3800, productC: 2800 },
+      { quarter: "Q4", productA: 4500, productB: 3908, productC: 3200 }
+    ],
+    series: [
+      { key: "productA", label: "Product A" },
+      { key: "productB", label: "Product B" },
+      { key: "productC", label: "Product C" }
+    ]
+  }}
+</Graph>
+```
+
+## Customization
+
+### Height
+
+Control the chart height with the `height` prop.
+
+<Graph type="bar" title="Compact chart" height={200} xKey="day" yKey="value">
+  {[
+    { day: "Mon", value: 12 },
+    { day: "Tue", value: 19 },
+    { day: "Wed", value: 15 },
+    { day: "Thu", value: 22 },
+    { day: "Fri", value: 18 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Compact chart" height={200} xKey="day" yKey="value">
+  {[
+    { day: "Mon", value: 12 },
+    { day: "Tue", value: 19 },
+    { day: "Wed", value: 15 },
+    { day: "Thu", value: 22 },
+    { day: "Fri", value: 18 }
+  ]}
+</Graph>
+```
+
+### Colors
+
+Customize chart colors with the `color` prop for single series or define colors in the series configuration.
+
+<Graph type="bar" title="Custom color" color="#8b5cf6" xKey="category" yKey="value">
+  {[
+    { category: "A", value: 400 },
+    { category: "B", value: 300 },
+    { category: "C", value: 500 },
+    { category: "D", value: 280 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Custom color" color="#8b5cf6" xKey="category" yKey="value">
+  {[
+    { category: "A", value: 400 },
+    { category: "B", value: 300 },
+    { category: "C", value: 500 },
+    { category: "D", value: 280 }
+  ]}
+</Graph>
+```
+
+### Hide legend
+
+Hide the legend with `showLegend={false}`.
+
+<Graph type="pie" title="Distribution" showLegend={false}>
+  {[
+    { label: "Category A", value: 40 },
+    { label: "Category B", value: 35 },
+    { label: "Category C", value: 25 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Distribution" showLegend={false}>
+  {[
+    { label: "Category A", value: 40 },
+    { label: "Category B", value: 35 },
+    { label: "Category C", value: 25 }
+  ]}
+</Graph>
+```
+
+### Grid lines
+
+Toggle grid lines with `showGrid`.
+
+<Graph type="line" title="Without grid" showGrid={false} xKey="x" yKey="y">
+  {[
+    { x: 1, y: 10 },
+    { x: 2, y: 25 },
+    { x: 3, y: 18 },
+    { x: 4, y: 32 },
+    { x: 5, y: 28 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Without grid" showGrid={false} xKey="x" yKey="y">
+  {[
+    { x: 1, y: 10 },
+    { x: 2, y: 25 },
+    { x: 3, y: 18 },
+    { x: 4, y: 32 },
+    { x: 5, y: 28 }
+  ]}
+</Graph>
+```
+
+## Props
+
+<ResponseField name="type" type="string" required>
+  The chart type. Options: `line`, `bar`, `area`, `pie`, `donut`.
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  The chart title displayed above the visualization.
+</ResponseField>
+
+<ResponseField name="xKey" type="string">
+  The data key to use for the x-axis (for line, bar, and area charts).
+</ResponseField>
+
+<ResponseField name="yKey" type="string">
+  The data key to use for the y-axis (for single series charts).
+</ResponseField>
+
+<ResponseField name="height" type="number" default="300">
+  The chart height in pixels.
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  The primary color for single series charts. Accepts hex, RGB, or CSS color names.
+</ResponseField>
+
+<ResponseField name="stacked" type="boolean" default="false">
+  Stack multiple series on top of each other (for bar and area charts).
+</ResponseField>
+
+<ResponseField name="showLegend" type="boolean" default="true">
+  Show or hide the chart legend.
+</ResponseField>
+
+<ResponseField name="showGrid" type="boolean" default="true">
+  Show or hide grid lines.
+</ResponseField>
+
+<ResponseField name="children" type="array | object" required>
+  The chart data. Pass an array for single series or an object with `data` and `series` for multiple series.
+</ResponseField>

From ab5bfb4b0cb032d8f15e5d155ceb03ffbe48d5e5 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:27 +0000
Subject: [PATCH 02/14] Update docs.json

---
 docs.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs.json b/docs.json
index 60d91773a..cd3849f51 100644
--- a/docs.json
+++ b/docs.json
@@ -87,6 +87,7 @@
                       "components/expandables",
                       "components/fields",
                       "components/frames",
+                      "components/graphs",
                       "components/icons",
                       "components/mermaid-diagrams",
                       "components/panel",

From b309c7a3bfd942b8ac34fb35d284111c9b15b18e Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:33 +0000
Subject: [PATCH 03/14] Update docs.json

---
 docs.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs.json b/docs.json
index cd3849f51..f01d4c703 100644
--- a/docs.json
+++ b/docs.json
@@ -389,6 +389,7 @@
                       "fr/components/expandables",
                       "fr/components/fields",
                       "fr/components/frames",
+                      "fr/components/graphs",
                       "fr/components/icons",
                       "fr/components/mermaid-diagrams",
                       "fr/components/panel",

From d08ed62be6cd4ea2725e32d0f5bc86f2200e1562 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:35 +0000
Subject: [PATCH 04/14] Update docs.json

---
 docs.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs.json b/docs.json
index f01d4c703..388d4602d 100644
--- a/docs.json
+++ b/docs.json
@@ -691,6 +691,7 @@
                       "es/components/expandables",
                       "es/components/fields",
                       "es/components/frames",
+                      "es/components/graphs",
                       "es/components/icons",
                       "es/components/mermaid-diagrams",
                       "es/components/panel",

From eaad4f279ac60164035c4203cf861df74baec8e7 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:36 +0000
Subject: [PATCH 05/14] Update docs.json

---
 docs.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs.json b/docs.json
index 388d4602d..361c51518 100644
--- a/docs.json
+++ b/docs.json
@@ -993,6 +993,7 @@
                       "zh/components/expandables",
                       "zh/components/fields",
                       "zh/components/frames",
+                      "zh/components/graphs",
                       "zh/components/icons",
                       "zh/components/mermaid-diagrams",
                       "zh/components/panel",

From dd893421817f03016a42160c1a3968593c1e9411 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:47 +0000
Subject: [PATCH 06/14] Update create/image-embeds.mdx

---
 create/image-embeds.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/create/image-embeds.mdx b/create/image-embeds.mdx
index 3bcb5278f..7bc55cfa9 100644
--- a/create/image-embeds.mdx
+++ b/create/image-embeds.mdx
@@ -187,3 +187,7 @@ Embed external content using iframe elements:
 <Card title="Frame component reference" icon="frame" horizontal href="/components/frames">
   Learn how to use the Frame component for presenting images.
 </Card>
+
+<Card title="Graphs" icon="chart-line" horizontal href="/components/graphs">
+  Create interactive charts and data visualizations.
+</Card>

From 3027caaae1a01528a5682c055f28600282d52108 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:32:50 +0000
Subject: [PATCH 07/14] Update components/mermaid-diagrams.mdx

---
 components/mermaid-diagrams.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/mermaid-diagrams.mdx b/components/mermaid-diagrams.mdx
index cecfed523..343267066 100644
--- a/components/mermaid-diagrams.mdx
+++ b/components/mermaid-diagrams.mdx
@@ -57,3 +57,9 @@ To create a Mermaid diagram, write your diagram definition inside a Mermaid code
 // Your mermaid diagram code here
 ```
 ````
+
+## Related resources
+
+<Card title="Graphs" icon="chart-line" horizontal href="/components/graphs">
+  Create interactive charts and data visualizations with the Graph component.
+</Card>

From 307397f47d70ee8a10f1ab239db066b16eaa4458 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:33:41 +0000
Subject: [PATCH 08/14] Update fr/components/graphs.mdx

---
 fr/components/graphs.mdx | 247 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 247 insertions(+)
 create mode 100644 fr/components/graphs.mdx

diff --git a/fr/components/graphs.mdx b/fr/components/graphs.mdx
new file mode 100644
index 000000000..d79b39a79
--- /dev/null
+++ b/fr/components/graphs.mdx
@@ -0,0 +1,247 @@
+---
+title: "Graphiques"
+description: "Affichez des graphiques interactifs et des visualisations de données avec le composant Graph."
+keywords: ["graphiques", "charts", "visualisation de données", "graphique linéaire", "graphique à barres", "graphique circulaire"]
+---
+
+Utilisez le composant `<Graph>` pour créer des graphiques interactifs et des visualisations de données dans votre documentation. Les graphiques aident les utilisateurs à comprendre les tendances, les comparaisons et les distributions de données en un coup d'œil.
+
+## Utilisation de base
+
+Encapsulez votre configuration de données dans un composant `<Graph>` et spécifiez le type de graphique.
+
+<Graph type="line" title="Revenus mensuels">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Fév", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Avr", revenue: 4500 },
+    { month: "Mai", revenue: 6000 },
+    { month: "Juin", revenue: 5500 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Revenus mensuels">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Fév", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Avr", revenue: 4500 },
+    { month: "Mai", revenue: 6000 },
+    { month: "Juin", revenue: 5500 }
+  ]}
+</Graph>
+```
+
+## Types de graphiques
+
+### Graphique linéaire
+
+Affichez les tendances dans le temps ou les données continues.
+
+<Graph type="line" title="Croissance des utilisateurs" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Fév", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Avr", users: 3100 },
+    { month: "Mai", users: 4200 },
+    { month: "Juin", users: 5100 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Croissance des utilisateurs" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Fév", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Avr", users: 3100 },
+    { month: "Mai", users: 4200 },
+    { month: "Juin", users: 5100 }
+  ]}
+</Graph>
+```
+
+### Graphique à barres
+
+Comparez les valeurs entre catégories.
+
+<Graph type="bar" title="Ventes par région" xKey="region" yKey="sales">
+  {[
+    { region: "Nord", sales: 4200 },
+    { region: "Sud", sales: 3800 },
+    { region: "Est", sales: 5100 },
+    { region: "Ouest", sales: 4700 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Ventes par région" xKey="region" yKey="sales">
+  {[
+    { region: "Nord", sales: 4200 },
+    { region: "Sud", sales: 3800 },
+    { region: "Est", sales: 5100 },
+    { region: "Ouest", sales: 4700 }
+  ]}
+</Graph>
+```
+
+### Graphique en aires
+
+Affichez les totaux cumulés ou le volume dans le temps.
+
+<Graph type="area" title="Requêtes API" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="area" title="Requêtes API" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+```
+
+### Graphique circulaire
+
+Affichez les proportions d'un ensemble.
+
+<Graph type="pie" title="Sources de trafic">
+  {[
+    { source: "Organique", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Référent", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Sources de trafic">
+  {[
+    { source: "Organique", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Référent", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+```
+
+### Graphique en anneau
+
+Un graphique circulaire avec un centre évidé.
+
+<Graph type="donut" title="Utilisation des navigateurs">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Autre", value: 6 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="donut" title="Utilisation des navigateurs">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Autre", value: 6 }
+  ]}
+</Graph>
+```
+
+## Séries multiples
+
+Affichez plusieurs séries de données sur le même graphique pour comparaison.
+
+<Graph type="line" title="Revenus vs Dépenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Fév", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Avr", revenue: 4500, expenses: 3908 },
+      { month: "Mai", revenue: 6000, expenses: 4800 },
+      { month: "Juin", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenus", color: "#22c55e" },
+      { key: "expenses", label: "Dépenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="line" title="Revenus vs Dépenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Fév", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Avr", revenue: 4500, expenses: 3908 },
+      { month: "Mai", revenue: 6000, expenses: 4800 },
+      { month: "Juin", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenus", color: "#22c55e" },
+      { key: "expenses", label: "Dépenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+```
+
+## Props
+
+<ResponseField name="type" type="string" required>
+  Le type de graphique. Options : `line`, `bar`, `area`, `pie`, `donut`.
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  Le titre du graphique affiché au-dessus de la visualisation.
+</ResponseField>
+
+<ResponseField name="xKey" type="string">
+  La clé de données à utiliser pour l'axe des x (pour les graphiques linéaires, à barres et en aires).
+</ResponseField>
+
+<ResponseField name="yKey" type="string">
+  La clé de données à utiliser pour l'axe des y (pour les graphiques à série unique).
+</ResponseField>
+
+<ResponseField name="height" type="number" default="300">
+  La hauteur du graphique en pixels.
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  La couleur principale pour les graphiques à série unique. Accepte hex, RGB ou noms de couleurs CSS.
+</ResponseField>
+
+<ResponseField name="stacked" type="boolean" default="false">
+  Empiler plusieurs séries les unes sur les autres (pour les graphiques à barres et en aires).
+</ResponseField>
+
+<ResponseField name="showLegend" type="boolean" default="true">
+  Afficher ou masquer la légende du graphique.
+</ResponseField>
+
+<ResponseField name="showGrid" type="boolean" default="true">
+  Afficher ou masquer les lignes de grille.
+</ResponseField>
+
+<ResponseField name="children" type="array | object" required>
+  Les données du graphique. Passez un tableau pour une série unique ou un objet avec `data` et `series` pour plusieurs séries.
+</ResponseField>

From 18a77d810c9a5f7b49548961726cebe3d5c28e9c Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:34:10 +0000
Subject: [PATCH 09/14] Update es/components/graphs.mdx

---
 es/components/graphs.mdx | 247 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 247 insertions(+)
 create mode 100644 es/components/graphs.mdx

diff --git a/es/components/graphs.mdx b/es/components/graphs.mdx
new file mode 100644
index 000000000..bc0e5a711
--- /dev/null
+++ b/es/components/graphs.mdx
@@ -0,0 +1,247 @@
+---
+title: "Gráficos"
+description: "Muestra gráficos interactivos y visualizaciones de datos con el componente Graph."
+keywords: ["gráficos", "charts", "visualización de datos", "gráfico de líneas", "gráfico de barras", "gráfico circular"]
+---
+
+Usa el componente `<Graph>` para crear gráficos interactivos y visualizaciones de datos en tu documentación. Los gráficos ayudan a los usuarios a comprender tendencias, comparaciones y distribuciones de datos de un vistazo.
+
+## Uso básico
+
+Envuelve tu configuración de datos en un componente `<Graph>` y especifica el tipo de gráfico.
+
+<Graph type="line" title="Ingresos mensuales">
+  {[
+    { month: "Ene", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Abr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Ingresos mensuales">
+  {[
+    { month: "Ene", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Abr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+```
+
+## Tipos de gráficos
+
+### Gráfico de líneas
+
+Muestra tendencias a lo largo del tiempo o datos continuos.
+
+<Graph type="line" title="Crecimiento de usuarios" xKey="month" yKey="users">
+  {[
+    { month: "Ene", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Abr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Crecimiento de usuarios" xKey="month" yKey="users">
+  {[
+    { month: "Ene", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Abr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+```
+
+### Gráfico de barras
+
+Compara valores entre categorías.
+
+<Graph type="bar" title="Ventas por región" xKey="region" yKey="sales">
+  {[
+    { region: "Norte", sales: 4200 },
+    { region: "Sur", sales: 3800 },
+    { region: "Este", sales: 5100 },
+    { region: "Oeste", sales: 4700 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Ventas por región" xKey="region" yKey="sales">
+  {[
+    { region: "Norte", sales: 4200 },
+    { region: "Sur", sales: 3800 },
+    { region: "Este", sales: 5100 },
+    { region: "Oeste", sales: 4700 }
+  ]}
+</Graph>
+```
+
+### Gráfico de área
+
+Muestra totales acumulados o volumen a lo largo del tiempo.
+
+<Graph type="area" title="Solicitudes API" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="area" title="Solicitudes API" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+```
+
+### Gráfico circular
+
+Muestra proporciones de un conjunto.
+
+<Graph type="pie" title="Fuentes de tráfico">
+  {[
+    { source: "Orgánico", value: 45 },
+    { source: "Directo", value: 25 },
+    { source: "Referencia", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Fuentes de tráfico">
+  {[
+    { source: "Orgánico", value: 45 },
+    { source: "Directo", value: 25 },
+    { source: "Referencia", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+```
+
+### Gráfico de dona
+
+Un gráfico circular con un centro recortado.
+
+<Graph type="donut" title="Uso de navegadores">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Otro", value: 6 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="donut" title="Uso de navegadores">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Otro", value: 6 }
+  ]}
+</Graph>
+```
+
+## Series múltiples
+
+Muestra múltiples series de datos en el mismo gráfico para comparación.
+
+<Graph type="line" title="Ingresos vs Gastos" xKey="month">
+  {{
+    data: [
+      { month: "Ene", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Abr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Ingresos", color: "#22c55e" },
+      { key: "expenses", label: "Gastos", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="line" title="Ingresos vs Gastos" xKey="month">
+  {{
+    data: [
+      { month: "Ene", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Abr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Ingresos", color: "#22c55e" },
+      { key: "expenses", label: "Gastos", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+```
+
+## Props
+
+<ResponseField name="type" type="string" required>
+  El tipo de gráfico. Opciones: `line`, `bar`, `area`, `pie`, `donut`.
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  El título del gráfico que se muestra sobre la visualización.
+</ResponseField>
+
+<ResponseField name="xKey" type="string">
+  La clave de datos a usar para el eje x (para gráficos de líneas, barras y área).
+</ResponseField>
+
+<ResponseField name="yKey" type="string">
+  La clave de datos a usar para el eje y (para gráficos de serie única).
+</ResponseField>
+
+<ResponseField name="height" type="number" default="300">
+  La altura del gráfico en píxeles.
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  El color principal para gráficos de serie única. Acepta hex, RGB o nombres de colores CSS.
+</ResponseField>
+
+<ResponseField name="stacked" type="boolean" default="false">
+  Apilar múltiples series una encima de otra (para gráficos de barras y área).
+</ResponseField>
+
+<ResponseField name="showLegend" type="boolean" default="true">
+  Mostrar u ocultar la leyenda del gráfico.
+</ResponseField>
+
+<ResponseField name="showGrid" type="boolean" default="true">
+  Mostrar u ocultar las líneas de cuadrícula.
+</ResponseField>
+
+<ResponseField name="children" type="array | object" required>
+  Los datos del gráfico. Pasa un array para serie única o un objeto con `data` y `series` para múltiples series.
+</ResponseField>

From 502aae841ab635ac3d6002e2c3b0db7e35f7278f Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:34:41 +0000
Subject: [PATCH 10/14] Update zh/components/graphs.mdx

---
 zh/components/graphs.mdx | 247 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 247 insertions(+)
 create mode 100644 zh/components/graphs.mdx

diff --git a/zh/components/graphs.mdx b/zh/components/graphs.mdx
new file mode 100644
index 000000000..c01977a20
--- /dev/null
+++ b/zh/components/graphs.mdx
@@ -0,0 +1,247 @@
+---
+title: "图表"
+description: "使用 Graph 组件显示交互式图表和数据可视化。"
+keywords: ["图表", "charts", "数据可视化", "折线图", "柱状图", "饼图"]
+---
+
+使用 `<Graph>` 组件在文档中创建交互式图表和数据可视化。图表帮助用户一目了然地理解数据趋势、比较和分布。
+
+## 基本用法
+
+将数据配置包装在 `<Graph>` 组件中并指定图表类型。
+
+<Graph type="line" title="月度收入">
+  {[
+    { month: "1月", revenue: 4000 },
+    { month: "2月", revenue: 3000 },
+    { month: "3月", revenue: 5000 },
+    { month: "4月", revenue: 4500 },
+    { month: "5月", revenue: 6000 },
+    { month: "6月", revenue: 5500 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="月度收入">
+  {[
+    { month: "1月", revenue: 4000 },
+    { month: "2月", revenue: 3000 },
+    { month: "3月", revenue: 5000 },
+    { month: "4月", revenue: 4500 },
+    { month: "5月", revenue: 6000 },
+    { month: "6月", revenue: 5500 }
+  ]}
+</Graph>
+```
+
+## 图表类型
+
+### 折线图
+
+显示随时间变化的趋势或连续数据。
+
+<Graph type="line" title="用户增长" xKey="month" yKey="users">
+  {[
+    { month: "1月", users: 1200 },
+    { month: "2月", users: 1900 },
+    { month: "3月", users: 2400 },
+    { month: "4月", users: 3100 },
+    { month: "5月", users: 4200 },
+    { month: "6月", users: 5100 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="用户增长" xKey="month" yKey="users">
+  {[
+    { month: "1月", users: 1200 },
+    { month: "2月", users: 1900 },
+    { month: "3月", users: 2400 },
+    { month: "4月", users: 3100 },
+    { month: "5月", users: 4200 },
+    { month: "6月", users: 5100 }
+  ]}
+</Graph>
+```
+
+### 柱状图
+
+比较不同类别之间的值。
+
+<Graph type="bar" title="各区域销售额" xKey="region" yKey="sales">
+  {[
+    { region: "北部", sales: 4200 },
+    { region: "南部", sales: 3800 },
+    { region: "东部", sales: 5100 },
+    { region: "西部", sales: 4700 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="各区域销售额" xKey="region" yKey="sales">
+  {[
+    { region: "北部", sales: 4200 },
+    { region: "南部", sales: 3800 },
+    { region: "东部", sales: 5100 },
+    { region: "西部", sales: 4700 }
+  ]}
+</Graph>
+```
+
+### 面积图
+
+显示随时间变化的累计总量或数量。
+
+<Graph type="area" title="API 请求" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="area" title="API 请求" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+```
+
+### 饼图
+
+显示整体的各部分比例。
+
+<Graph type="pie" title="流量来源">
+  {[
+    { source: "自然搜索", value: 45 },
+    { source: "直接访问", value: 25 },
+    { source: "引荐", value: 20 },
+    { source: "社交", value: 10 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="流量来源">
+  {[
+    { source: "自然搜索", value: 45 },
+    { source: "直接访问", value: 25 },
+    { source: "引荐", value: 20 },
+    { source: "社交", value: 10 }
+  ]}
+</Graph>
+```
+
+### 环形图
+
+中心镂空的饼图。
+
+<Graph type="donut" title="浏览器使用情况">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "其他", value: 6 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="donut" title="浏览器使用情况">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "其他", value: 6 }
+  ]}
+</Graph>
+```
+
+## 多系列
+
+在同一图表上显示多个数据系列进行比较。
+
+<Graph type="line" title="收入 vs 支出" xKey="month">
+  {{
+    data: [
+      { month: "1月", revenue: 4000, expenses: 2400 },
+      { month: "2月", revenue: 3000, expenses: 1398 },
+      { month: "3月", revenue: 5000, expenses: 3800 },
+      { month: "4月", revenue: 4500, expenses: 3908 },
+      { month: "5月", revenue: 6000, expenses: 4800 },
+      { month: "6月", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "收入", color: "#22c55e" },
+      { key: "expenses", label: "支出", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="line" title="收入 vs 支出" xKey="month">
+  {{
+    data: [
+      { month: "1月", revenue: 4000, expenses: 2400 },
+      { month: "2月", revenue: 3000, expenses: 1398 },
+      { month: "3月", revenue: 5000, expenses: 3800 },
+      { month: "4月", revenue: 4500, expenses: 3908 },
+      { month: "5月", revenue: 6000, expenses: 4800 },
+      { month: "6月", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "收入", color: "#22c55e" },
+      { key: "expenses", label: "支出", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+```
+
+## 属性
+
+<ResponseField name="type" type="string" required>
+  图表类型。选项：`line`、`bar`、`area`、`pie`、`donut`。
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  显示在可视化上方的图表标题。
+</ResponseField>
+
+<ResponseField name="xKey" type="string">
+  用于 x 轴的数据键（适用于折线图、柱状图和面积图）。
+</ResponseField>
+
+<ResponseField name="yKey" type="string">
+  用于 y 轴的数据键（适用于单系列图表）。
+</ResponseField>
+
+<ResponseField name="height" type="number" default="300">
+  图表高度（像素）。
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  单系列图表的主色。接受十六进制、RGB 或 CSS 颜色名称。
+</ResponseField>
+
+<ResponseField name="stacked" type="boolean" default="false">
+  将多个系列堆叠在一起（适用于柱状图和面积图）。
+</ResponseField>
+
+<ResponseField name="showLegend" type="boolean" default="true">
+  显示或隐藏图表图例。
+</ResponseField>
+
+<ResponseField name="showGrid" type="boolean" default="true">
+  显示或隐藏网格线。
+</ResponseField>
+
+<ResponseField name="children" type="array | object" required>
+  图表数据。传递数组用于单系列，或传递包含 `data` 和 `series` 的对象用于多系列。
+</ResponseField>

From aadef7abe2804142b4dde765783d3007c5cce35b Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:34:49 +0000
Subject: [PATCH 11/14] Update fr/components/mermaid-diagrams.mdx

---
 fr/components/mermaid-diagrams.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/fr/components/mermaid-diagrams.mdx b/fr/components/mermaid-diagrams.mdx
index ea3714431..8d8eb4273 100644
--- a/fr/components/mermaid-diagrams.mdx
+++ b/fr/components/mermaid-diagrams.mdx
@@ -60,3 +60,9 @@ Pour créer un diagramme Mermaid, écrivez la définition de votre diagramme dan
 // Votre code de diagramme mermaid ici
 ```
 ````
+
+## Ressources connexes
+
+<Card title="Graphiques" icon="chart-line" horizontal href="/fr/components/graphs">
+  Créez des graphiques interactifs et des visualisations de données avec le composant Graph.
+</Card>

From ff32b316522b739f574cfe78b43ff6ba69897103 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:34:50 +0000
Subject: [PATCH 12/14] Update es/components/mermaid-diagrams.mdx

---
 es/components/mermaid-diagrams.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/es/components/mermaid-diagrams.mdx b/es/components/mermaid-diagrams.mdx
index eb481ed18..f09f98307 100644
--- a/es/components/mermaid-diagrams.mdx
+++ b/es/components/mermaid-diagrams.mdx
@@ -60,3 +60,9 @@ Para crear un diagrama de Mermaid, escribe la definición del diagrama dentro de
 // Tu código de diagrama mermaid aquí
 ```
 ````
+
+## Recursos relacionados
+
+<Card title="Gráficos" icon="chart-line" horizontal href="/es/components/graphs">
+  Crea gráficos interactivos y visualizaciones de datos con el componente Graph.
+</Card>

From 9ec6e923e3f4d39e94d9ad5ae61289e897bd529f Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:34:57 +0000
Subject: [PATCH 13/14] Update zh/components/mermaid-diagrams.mdx

---
 zh/components/mermaid-diagrams.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/zh/components/mermaid-diagrams.mdx b/zh/components/mermaid-diagrams.mdx
index c91de72b1..96dbc4376 100644
--- a/zh/components/mermaid-diagrams.mdx
+++ b/zh/components/mermaid-diagrams.mdx
@@ -60,3 +60,9 @@ keywords: ["Mermaid", "flowcharts", "diagrams"]
 // 在此处编写您的 mermaid 图表代码
 ```
 ````
+
+## 相关资源
+
+<Card title="图表" icon="chart-line" horizontal href="/zh/components/graphs">
+  使用 Graph 组件创建交互式图表和数据可视化。
+</Card>

From e24d96b5b1861daa67404a679e48ce0dc95f792c Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 23:35:14 +0000
Subject: [PATCH 14/14] Update create/text.mdx

---
 create/text.mdx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/create/text.mdx b/create/text.mdx
index b46d766b4..a3a7caced 100644
--- a/create/text.mdx
+++ b/create/text.mdx
@@ -230,3 +230,13 @@ This line starts on a new line.
 - Write descriptive link text instead of "click here" or "read more"
 - Use root-relative paths for internal links
 - Test links regularly to prevent broken references
+
+## Related resources
+
+<Card title="Graphs" icon="chart-line" horizontal href="/components/graphs">
+  Create interactive charts and data visualizations.
+</Card>
+
+<Card title="Mermaid diagrams" icon="diagram-project" horizontal href="/components/mermaid-diagrams">
+  Build flowcharts, sequence diagrams, and more with Mermaid syntax.
+</Card>