From d2162d4a10066ff90ff3cf4f7ec2c9a3c62a8c1a Mon Sep 17 00:00:00 2001
From: huyenngn <ngan-huyen.thi-nguyen@deutschebahn.com>
Date: Mon, 9 Dec 2024 22:28:23 +0100
Subject: [PATCH] docs(custom_diagram): Add example to docs

---
 docs/custom_diagram.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/custom_diagram.md b/docs/custom_diagram.md
index 66d0da7..3f4f7de 100644
--- a/docs/custom_diagram.md
+++ b/docs/custom_diagram.md
@@ -8,8 +8,37 @@
 `Custom diagram`s let's you create custom diagrams based on the data in the model. You define the data collection using an iterable and `Custom diagram` takes care of the rest.
 You can access `.custom_diagram` on any supported model element.
 
+??? example "Custom Diagram of `PP 1 `"
+
+    ``` py
+    import capellambse
+
+    visited = set()
+
+    def _collector(
+        target: m.ModelElement,
+    ) -> cabc.Iterator[m.ModelElement]:
+        if target.uuid in visited:
+            return
+        visited.add(target.uuid)
+        for link in target.links:
+            yield link
+            yield from _collector(link.source)
+            yield from _collector(link.target)
+
+
+    model = capellambse.MelodyModel("tests/data/ContextDiagram.aird")
+    obj = model.by_uuid("c403d4f4-9633-42a2-a5d6-9e1df2655146")
+    diag = obj.context_diagram
+    diag.render("svgdiagram", collect=_collector(obj)).save(pretty=True)
+    ```
+    <figure markdown>
+        <img src="assets/images/Context of PP 1.svg" width="1000000">
+        <figcaption>Context of PP 1 [PAB]</figcaption>
+    </figure>
+
 ## Check out the code
 
 To understand the collection have a look into the
-[`cable_tree`][capellambse_context_diagrams.collectors.cable_tree]
+[`custom`][capellambse_context_diagrams.collectors.custom]
 module.