From 6f8870f9adb2c3ca4e6ce9c9eeb57b021fe62c3d Mon Sep 17 00:00:00 2001
From: Chris Oloff <chris@uber5.com>
Date: Fri, 19 Dec 2025 11:16:18 +0200
Subject: [PATCH] docs: add tutorial on how to add diagram, wip

---
 docs/howto_add_diagram.md | 45 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 docs/howto_add_diagram.md

diff --git a/docs/howto_add_diagram.md b/docs/howto_add_diagram.md
new file mode 100644
index 0000000..a8d5375
--- /dev/null
+++ b/docs/howto_add_diagram.md
@@ -0,0 +1,45 @@
+# Tutorial: How to Add a Diagram to Your Viewlib App
+
+## Prerequisites
+
+- You should be familiar with Python.
+- You are able to run the sample as per the ../README.md#installation.
+
+## Introduction
+
+Before adding a diagram, let's add something simpler: a Boolean indicator that shows whether the geyser is on or off.
+
+## Add a Boolean Indicator
+
+```diff
+--- a/sample.py
++++ b/sample.py
+@@ -21,6 +21,15 @@ state_as_text = panel.bind(state_to_text, w42_state)
+
+ state_pane = panel.pane.Markdown(state_as_text, sizing_mode='stretch_width')
+
++def get_geyser_state(state: dict[str, Any]) -> bool:
++    if not state:
++        return False
++    return state.get("is_geyser_on", False)
++
++geyser_state = panel.rx(get_geyser_state)(w42_state)
++
++indicator = panel.indicators.BooleanStatus(value=geyser_state, name="W42 Connected", color="success")
++
+ sidebar_content = """
+ This example shows how to build a front end for a Watt42 system: Watt42 API
+ manages the state of the system, this app visualizes it.
+@@ -34,6 +43,7 @@ _ = panel.template.FastListTemplate(
+     title="Sample W42 App",
+     sidebar=[panel.pane.Markdown(sidebar_content, sizing_mode='stretch_width')],
+     main=[
++        indicator,
+         state_pane,
+         w42_state,
+     ],
+```
+
+## Add a Diagram
+
+(TODO)