AI Learning Dashboard — Master Document

The complete reference for your Markdown engine, rendered live. This single document consolidates the engine showcase, the CSS class cheat sheet, the user guide, the capability report, and the chart gallery. Served at / by dashboard_server.py, styled by style.css, on port 8031.

Master Contents

Document Library

Every Markdown file in the project, styled with the dashboard. Click to open.

Running the Server

# from the project root
python dashboard_server.py
# then open http://localhost:8031/

Typography & Headings

Headings # … ###### are styled globally — no class needed:

Lightweight title classes (decorative, not in the TOC):

Lightweight heading blocks .b1 / .b2 / .b3:

Inline weight words: thin · light · regular · medium · semibold · bold

Numeric weights: 100 200 300 400 500 600 700 800 900

<div class="title-thin">Section divider</div>
<div class="b1">Lightweight title</div>
<span class="semibold">semibold</span>   <span class="fw-700">700</span>

Colors, Backgrounds & Badges

Text colors: black · dark · body · muted · soft · blue · green · red · yellow · orange · purple · pink

Soft background fills: bg-soft bg-blue-soft bg-green-soft bg-yellow-soft bg-red-soft bg-purple-soft

Badges: blue green yellow red purple gray

<span class="text-blue">blue</span>
<span class="bg-yellow-soft">highlight</span>
<span class="badge badge-green">done</span>

Note Cards & Columns

Two columns (.col-2):

Three columns (.col-3):

Four columns (.col-4):

<div class="note-card note-blue">Tip…</div>

<div class="col-3">
  <div class="col-card" markdown="1">**A**</div>
  <div class="col-card" markdown="1">**B**</div>
  <div class="col-card" markdown="1">**C**</div>
</div>

Tables

Wrap a table in a <div … markdown="1"> to constrain its width or tighten padding.

.table-mid .table-compact:

.table-narrow:

Alignment uses standard Markdown: |---|, |:--|, |:-:|, |--:|.

Images & Figures

Files live in images/, served at /images/.... Supported: png, jpg, gif, webp, svg, ico.

Sizes (.img-xs … .img-full) — same image, inline:

Styles — rounded + border + shadow, centered:

Float — .img-left lets text wrap to the right (add <div style="clear:both"> after):

This paragraph flows around the floated image. Use .img-left or .img-right to wrap body text beside a figure, and .img-inline when you want the image to sit in the text baseline without floating. Clear the float afterwards so the next block starts on its own line.

Figure widths — .fig-narrow / .fig-mid / .fig-wide wrap a captioned image (see Section 15).

<img src="/images/logo.svg" class="img-md img-center img-rounded img-shadow">

Video

Drop files in videos/ — served at /videos/... with HTTP range support, so scrubbing and seeking work. Width classes mirror the figure classes.

<video src="/videos/clip.mp4" class="video-mid" controls></video>

Formats: mp4, webm, ogg, mov, mkv.

Math — KaTeX

Identity $e^{i\pi} + 1 = 0$ — math renders inside headings too

Inline flows in text: the sigmoid is $\sigma(z) = \frac{1}{1+e^{-z}}$ and its derivative is $\sigma'(z) = \sigma(z)(1-\sigma(z))$.

Display:

Standalone block — a line containing only $ opens/closes a display block:

Auto-numbered equation caption — each aligned row is tagged and linkable (see Equation 9.3 and the individual row Equation 9.3.2):

KaTeX gallery — matrices, cases, sums, products, integrals, accents, colors:

Inline: $E = mc^2$
Display: $$ \sigma(z)=\frac{1}{1+e^{-z}} $$
Standalone block: a line of just  $  ...  $  becomes $$ ... $$
Matrix:  $$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} $$
Cases:   $$ \begin{cases} 1 & x>0 \\ 0 & x\le 0 \end{cases} $$

Math Utility Classes

When KaTeX can't run (Mermaid labels, SVG text, table cells), style math by hand. .math-text = italic variables, .math-op = upright operators/words:

The model y = wx + b, where sin and log stay upright.

The m-* classes typeset math inside Mermaid HTML labels:

The variable <span class="math-text">x</span> with <span class="math-op">max</span>.

Mermaid Diagrams

Flowchart:

Sequence diagram (mirrors this engine's live-reload loop):

State diagram:

Class diagram:

Entity relationship:

Pie chart:

Gantt:

User journey:

Read this as a satisfaction map, not a flowchart. Time runs left → right through two phases (Warm up, Deep work); the only data is the height of each face — the better that step felt, the higher it sits (5 = great, 1 = rough). So Open dashboard and Check answers (5) ride high, while Skim notes (3) dips.

Git graph:

Mindmap:

Quadrant chart:

```​mermaid
flowchart LR
  A[Raw data] --> B[Features]
```

Chart.js

Live, interactive charts with custom hover tooltips. Bar:

Line:

Doughnut, radar & scatter in a three-column grid:

Polar area, bubble & stacked bar:

<div id="my-chart"></div>
<script type="application/json" class="chartjs-config" data-target="my-chart">
{ "type": "line", "data": { "labels": ["A","B"], "datasets": [{ "data": [1,2] }] } }
</script>

SVG Diagrams & Charts

Widgets can emit inline SVG. Mark a shape .svg-chart-hover-item (plus .svg-chart-bar or .svg-chart-point) and add data-tooltip-title / data-tooltip-body — the engine wires up a floating tooltip automatically.

Hover the bars above — the tooltip is provided by the engine, not the SVG.

Code Highlighting

Pygments highlights many languages; every block gets a Copy button. The language tag after the opening fence selects the lexer.

from dataclasses import dataclass

@dataclass
class Neuron:
    weights: list[float]
    bias: float = 0.0

    def activate(self, xs: list[float]) -> float:
        z = sum(w * x for w, x in zip(self.weights, xs)) + self.bias
        return max(0.0, z)  # ReLU

const poll = async (url) => {
  const res = await fetch(url, { cache: "no-store" });
  return res.json();          // live-reload heartbeat
};

python dashboard_server.py        # start
curl -s localhost:8031/api/clock  # JSON time

SELECT model, AVG(loss) AS mean_loss
FROM   runs
WHERE  epoch > 10
GROUP  BY model
ORDER  BY mean_loss ASC;

{ "type": "bar", "data": { "labels": ["a", "b"], "datasets": [{ "data": [1, 2] }] } }

Nested fences — code inside a list item or blockquote (via superfences):

1. First, define the function:

   def square(x):
       return x * x

2. Then call it.

Tip — fenced code works inside blockquotes too:

http://localhost:8031/

Cross-references, Captions & Anchors

The engine indexes labels across every file. Reference with @-prefixed ids; unknown ids are flagged red so you catch typos.

A captioned figure (wrapped in .fig-narrow):

A captioned table:

Live, clickable references (click to flash the target): figure Figure 15.1 · table Table 15.2 · equation Equation 9.3 · row Equation 9.3.2 · section Section 19.

Cross-file reference — the index spans the whole project; this one resolves into classes.md and opens in a new tab: @sec-typography.

Sentence anchor — deep-link an exact line: this sentence is addressable as ¶.

Broken reference is flagged so you notice: @fig-typo-here

:::​caption type="figure" id="fig-logo" title="..."
<img src="/images/x.png" class="img-full">
:::

Reference it: @fig-logo   ·   Anchor a line: [text]{#par-key}

Checkboxes & Copy Buttons

Task checkboxes are persistent — ticking one writes back to index.md on disk, and the progress widget updates instantly:

• Start the dashboard server
• Open this showcase
• Tick this box and watch the bar move
• Write your first widget

Every code block has an automatic Copy button in its corner:

def relu(x):
    return max(0.0, x)

Footnotes, Lists & More

Footnotes render at the bottom with a back-link.¹ Abbreviations show on hover: KaTeX, ML, DPR. Strikethrough: deprecated. Subscript: H₂O.

Definition list:

Backprop

Reverse-mode automatic differentiation through the network.

Epoch

One full pass over the training set.

Ordered + nested list:

1. Preprocess
2. Clean
3. Normalize
4. Train
5. forward pass
6. backward pass
7. Evaluate

Blockquote with inline code and a link to classes.md:

The best way to learn the engine is to read its output side by side with its source. Everything on this page is plain Markdown plus a few HTML wrappers.

A claim.[^1]      ~~struck~~      H~2~O      `inline code`
*[ML]: Machine Learning
[^1]: The footnote text.

Inline Elements & Disclosure

Keyboard keys with <kbd>: press ⌘ + S to save, Esc to cancel.

Highlight with <mark>: the engine supports highlighted text inline.

Insertions / deletions: added and removed render with semantic color.

Attribute lists — attach a class to inline emphasis or code: styled emphasis · styled code · bold accent.

Collapsible sections with <details>:

print("revealed on demand")

Press <kbd>⌘</kbd> + <kbd>S</kbd>.   <mark>highlight</mark>.   <ins>add</ins> <del>cut</del>.
*emphasis*{.text-blue}

<details markdown="1">
<summary>Click to expand</summary>
Hidden **markdown** content.
</details>

Python Widgets

Placeholders run a file in widgets/ and inject its HTML. All five bundled widgets, live:

clock — refreshed every second by the server:

project_status — pass a status string:

task_progress — counts the checkboxes in this file (see Section 16).

file_index — the live file grid (see Section 1).

sine_graph — an interactive plot; drag the sliders:

Syntax:

{​{ clock }}                 run widgets/clock.py
{​{ project_status: text }}  pass an argument string
{​{ file_index: folder }}    restrict to a subfolder

Add your own — drop a file in widgets/:

# widgets/hello.py
def render(context=None, argument=None):
    label = argument or "world"
    return f"<div class='py-widget'>Hello, {label}!</div>"

The context dict provides:

Export & Editor Integration

Exported HTML inlines the CSS and drops the live-reload script, so it is fully self-contained and portable.

Server Routes

Full CSS Class Index

Every class in style.css, grouped. For styled, copy-paste examples open classes.md.

CSS Class Cheat Sheet

Open this file whenever you need to know what to write. Every class has syntax + a live example.

Typography

Headings

Written with # — ######. Styled globally, no class needed.

Lightweight Title Classes

Thinner, lighter than bold headings. Great for section openers and sub-labels.

Syntax: <div class="b1">text</div>

To customize — style.css sections 16 and 20.

Font Weight Utilities

Syntax: <span class="fw-300">text</span> or named alias <span class="light">text</span>

Colors

Text Colors

Syntax: <span class="text-blue">text</span>

To add a color — one line in style.css section 18: .text-teal { color: #0D9488 !important; }

Background Colors

Fills only — no padding or radius. Add inline style for those.

Syntax: <div class="bg-blue-soft" style="padding:8px 12px;border-radius:8px">text</div>

To add a background — one line in style.css section 19: .bg-teal-soft { background: #F0FDFA !important; }

Note Cards

.note-card is the base. Add a color modifier for a left border + tinted background.

Syntax:

<div class="note-card note-blue">
Content — **bold** and *italic* work inside.
</div>

To add a color — style.css section 21: .note-purple { border-left: 4px solid #7C3AED; background: #F5F3FF; }

Images

Drop files into images/ — served at /images/filename. Supported: jpg, png, gif, webp, svg.

Syntax: <img src="/images/file.png" alt="..." class="img-lg img-center img-rounded img-shadow">

Size classes

Alignment classes

After a floated image, add <div style="clear:both"></div>.

Style classes

Captioned figure

<div id="fig-cls-photo" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/photo.png" alt="photo" class="img-lg img-center img-rounded img-shadow">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Caption text</div>
</div>

Then reference anywhere with @fig-cls-photo.

Live example — see Section 7 in Part I.

Tables & Figure Sizing

Table width

Wrap in a div — always add markdown="1" so the markdown parser processes the table inside.

<div class="table-narrow" markdown="1">

| Col | Col |
|---|---|
| ... | ... |

</div>

Caption-box width

Wrap the :::caption block in a div — also needs markdown="1".

<div class="fig-mid" markdown="1">

<div id="fig-cls-x" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/photo.png" class="img-full img-rounded">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: ...</div>
</div>

</div>

Math Utility Classes

Use when KaTeX isn't available — inside Mermaid labels, SVG text, or plain HTML.

Syntax: <span class="math-text">x</span> · <span class="math-op">softmax</span>

f(x) = softmax(Wx + b)

In Mermaid nodes:

A["<span class='math-text'>W</span>₁"]

Cross-References & Anchors

Writing a reference target

Linking to a reference

Write @ref-id anywhere in any .md file. Same-file links scroll and highlight. Cross-file links open in a new tab with ↗.

Unknown refs show as a red badge. Cross-file refs get .cross-ref-external.

Sentence anchors

Make any sentence linkable — not just headings.

[The sentence to anchor.]{#par-cls-my-id | link label}

• Must be on a single line
• | link label sets what @par-cls-my-id shows — omit for ¶
• Clicking the link scrolls to the sentence and applies a blue highlight

Live demo — this sentence is anchored and can be referenced from any file.

Reference it: anchor demo

Combinations

Section opener

<div class="b1">Topic Name</div>
<div class="b3 text-muted">Subtopic · Chapter N</div>

Highlighted inline term

The <span class="text-blue bold">learning rate</span> $\eta$ controls step size.

Color-tinted badge

<span class="bg-yellow-soft text-dark" style="padding:2px 8px;border-radius:6px">Warning</span>

Note card with a sentence anchor

<div class="note-card note-blue">
<strong>Key idea</strong> — [sentence to anchor.]{#par-cls-my-id | link label}
</div>

Reference it: gradient direction

Narrow table

<div class="table-narrow" markdown="1">

| A | B |
|---|---|
| ... | ... |

</div>

Constrained captioned figure

<div class="fig-mid" markdown="1">

<div id="fig-cls-x" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/photo.png" class="img-full img-rounded img-shadow">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Caption</div>
</div>

</div>

Adding a New Class

1. Open style.css
2. Find the right section — colors → 18, cards → 21, images → 27
3. Add your rule with literal values — no var()
4. Update the spec-line comment at the top of that section
5. Add a live example here or in showcase.md

No build step. Refresh the browser.

Dashboard User Guide

Complete reference for every dashboard feature — server setup, syntax, live examples, and copy-paste code.

Contents

1. Server & Routes

# start from the project root
python dashboard_server.py
# → http://localhost:8030

The server auto-reloads style.css on every request. Changes to dashboard_server.py require a restart.

2. Headings

H1 — 2.7rem · weight 700

H2 — 2.3rem · weight 700

H3 — 1.8rem · weight 700

H4 — 1.5rem · weight 700

H5 — 1.2rem · weight 700

H6 — 1.1rem · weight 700

# H1 heading
## H2 heading
### H3 heading
#### H4 heading
##### H5 heading
###### H6 heading

3. Lightweight Titles

Use instead of # headings for thinner, lighter labels.

<div class="b1">b1 — 1.6rem · weight 200</div>
<div class="b2">b2 — 1.25rem · weight 300</div>
<div class="b3">b3 — 1rem · weight 300 · muted</div>
<div class="title-thin">title-thin — 1.6rem · weight 200 · dark</div>
<div class="title-light">title-light — 1.35rem · weight 300 · dark</div>
<div class="title-colored">title-colored — 1.35rem · weight 300 · blue</div>

4. Body Text, Links & Blockquotes

Body text is SF Pro Display · 21px · weight 400 · line-height 1.4. Here is a hyperlink — blue #2563EB. Bold, italic, bold italic.

Blockquote — italic · color #845454 · left border #969595

Multiple paragraphs supported.

Body text is **bold**, *italic*, ***bold italic***, and [links](#anchor).

> Blockquote paragraph one.
>
> Paragraph two — multiple paragraphs supported.

5. Font Weights

Nine weights from ultralight to black — numeric classes .fw-100–.fw-900 or named aliases.

fw-100 Ultralight · fw-200 Thin · fw-300 Light · fw-400 Regular · fw-500 Medium · fw-600 Semibold · fw-700 Bold · fw-800 Heavy · fw-900 Black

<span class="fw-300">Light text</span>
<span class="fw-600">Semibold text</span>
<span class="fw-900">Black text</span>

<!-- Named aliases also work -->
<span class="thin">Thin</span>
<span class="light">Light</span>
<span class="medium">Medium</span>
<span class="semibold">Semibold</span>
<span class="bold">Bold</span>

6. Text Colors

Neutral shades and seven accent colors — wrap any inline element with the class.

text-black · text-dark · text-muted · text-soft

text-red · text-orange · text-yellow · text-green · text-blue · text-purple · text-pink

<!-- Neutral shades -->
<span class="text-black">text-black</span>
<span class="text-dark">text-dark</span>
<span class="text-muted">text-muted</span>
<span class="text-soft">text-soft</span>

<!-- Accent colors -->
<span class="text-blue">text-blue</span>
<span class="text-green">text-green</span>
<span class="text-red">text-red</span>
<span class="text-orange">text-orange</span>
<span class="text-yellow">text-yellow</span>
<span class="text-purple">text-purple</span>
<span class="text-pink">text-pink</span>

7. Background Colors

Six soft tinted backgrounds — add padding and border-radius via inline style to taste.

<div class="bg-soft"        style="padding:8px 12px;border-radius:8px">bg-soft</div>
<div class="bg-blue-soft"   style="padding:8px 12px;border-radius:8px">bg-blue-soft</div>
<div class="bg-green-soft"  style="padding:8px 12px;border-radius:8px">bg-green-soft</div>
<div class="bg-yellow-soft" style="padding:8px 12px;border-radius:8px">bg-yellow-soft</div>
<div class="bg-red-soft"    style="padding:8px 12px;border-radius:8px">bg-red-soft</div>
<div class="bg-purple-soft" style="padding:8px 12px;border-radius:8px">bg-purple-soft</div>

8. Note Cards

Callout blocks in five colors — note-card is the base class, add a color modifier for variants. Add markdown="1" when content uses markdown syntax.

<div class="note-card">Default — neutral background.</div>
<div class="note-card note-blue"><strong>Blue</strong> — tips, info, see-also</div>
<div class="note-card note-green"><strong>Green</strong> — confirmations, completed steps</div>
<div class="note-card note-yellow"><strong>Yellow</strong> — warnings, caveats</div>
<div class="note-card note-red"><strong>Red</strong> — errors, critical notes</div>

<!-- With markdown content inside -->
<div class="note-card note-blue" markdown="1">

**Bold title** — body text, $math$, and `code` all work inside.

</div>

9. Code Blocks

Inline backticks for short snippets, fenced blocks for multi-line code — any language tag works for syntax highlighting.

Inline: w is the weight vector, b is bias, alpha is the learning rate.

def softmax(x):
    e_x = np.exp(x - np.max(x))
    return e_x / e_x.sum()

python dashboard_server.py   # Open http://localhost:8030

server:
  host: localhost
  port: 8030

{
  "amf": { "plmn": "00101", "tac": 1 },
  "gnb": { "band": 78, "txPowerDbm": 23 }
}

Inline: `code snippet here`

```python
def my_function(x):
    return x * 2
```

```bash
python script.py --flag value
```

10. Badges & Pills

Inline status labels in six colors — use them anywhere: headings, tables, sentences.

In Progress Done Review Blocked Experimental Archived

In context — model comparison

<span class="badge badge-blue">In Progress</span>
<span class="badge badge-green">Done</span>
<span class="badge badge-yellow">Review</span>
<span class="badge badge-red">Blocked</span>
<span class="badge badge-purple">Experimental</span>
<span class="badge badge-gray">Archived</span>

11. Tables

Standard — full width

Narrow — .table-narrow (max-width 480px)

Mid-width — .table-mid (max-width 720px)

Compact — .table-compact (tight cell padding)

Column alignment — Left / Center / Right

Captioned + constrained — inside .fig-mid (700px)

See Table 11.1 and Table 11.6.

<!-- Captioned full-width table -->
<div id="tab-l1-id" class="caption-box caption-table" markdown="1">
<div class="caption-content" markdown="1">
| Col A | Col B | Col C |
|---|---|---|
| val | val | val |
</div>
<div class="caption-title"><span class="caption-label">Table</span>: Table caption here</div>
</div>

<!-- Narrow (480px) -->
<div class="table-narrow" markdown="1">

| Col A | Col B |
|---|---|
| val | val |

</div>

<!-- Mid-width (720px) -->
<div class="table-mid" markdown="1">

| Col A | Col B | Col C |
|---|---|---|
| val | val | val |

</div>

<!-- Compact padding + mid-width -->
<div class="table-compact table-mid" markdown="1">

| Col A | Col B |
|---|---|
| val | val |

</div>

<!-- Column alignment -->
| Left | Center | Right |
|:---|:---:|---:|
| val | val | val |

<!-- Captioned + constrained width -->
<div class="fig-mid" markdown="1">

<div id="tab-l1-id2" class="caption-box caption-table" markdown="1">
<div class="caption-content" markdown="1">
| Col A | Col B |
|---|---|
| val | val |
</div>
<div class="caption-title"><span class="caption-label">Table</span>: Caption at 700px</div>
</div>

</div>

12. Images & SVG

Drop files into images/ — served at /images/filename. SVGs scale perfectly at any size.

Size classes — xs · sm · md · lg · xl

Icon inline with text

Figure 12.4: Icon inline with text

Optimized for Apple Silicon — runs natively on M1 / M2 / M3

CSS color theming — same SVG, different fills

default

blue

green

red

muted

on dark

SVG in col-card grid

macOS

Desktop

iOS

Mobile

watchOS

Watch

tvOS

TV

Inline SVG with CSS fill & hover

Hover to turn blue — inline SVG path targeted with CSS

CSS Animations

@keyframes svg-spin   { from { transform: rotate(0deg) }   to { transform: rotate(360deg) } }
@keyframes svg-pulse  { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) } }
@keyframes svg-bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes svg-glow   { 0%,100% { filter: drop-shadow(0 0 0px #2563EB) } 50% { filter: drop-shadow(0 0 12px #2563EB) } }
.anim-spin   { animation: svg-spin   2s linear infinite; transform-origin: center }
.anim-pulse  { animation: svg-pulse  1.6s ease-in-out infinite }
.anim-bounce { animation: svg-bounce 1.2s ease-in-out infinite }
.anim-glow   { animation: svg-glow   1.8s ease-in-out infinite }

Gradient fill — SVG <defs>

Drop shadow & glow — CSS filter

drop-shadow

blue glow

pink glow

blur + shadow

Glassmorphism card

Figure 12.5: Glassmorphism card

Apple Silicon

M-series · unified memory · neural engine

Float & captioned figure

Text wraps around a floated SVG just like any image. Use .img-right or .img-left with any size class. The gradient $\nabla_\theta \mathcal{L}$ points toward steepest ascent — stepping opposite reduces loss.

Figure 12.7 (large) · Figure 12.8 (narrow wrapper)

<!-- Size classes -->
<img src="/images/file.svg" class="img-xs img-rounded img-border">
<img src="/images/file.svg" class="img-sm img-center img-shadow">
<img src="/images/file.svg" class="img-md img-center img-shadow">
<img src="/images/file.svg" class="img-lg img-center img-shadow">

<!-- Inline icon -->
<div style="display:flex;align-items:center;gap:10px">
  <img src="/images/icon.svg" style="width:22px;height:22px">
  <span>Text next to icon</span>
</div>

<!-- Float right — text wraps around it -->
<img src="/images/file.svg" class="img-xs img-right img-rounded img-shadow">
Text that wraps around the floated image...
<div style="clear:both"></div>

<!-- Captioned figure -->
<div id="fig-l1-id" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-md img-center img-shadow">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Figure caption</div>
</div>

<!-- Constrained to 480px -->
<div class="fig-narrow" markdown="1">

<div id="fig-l1-id-sm" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-full img-rounded img-border">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Narrow caption</div>
</div>

</div>

<!-- Gradient fill with <defs> -->
<svg viewBox="0 0 24 24">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#2563EB"/>
      <stop offset="100%" stop-color="#7C3AED"/>
    </linearGradient>
  </defs>
  <path fill="url(#g)" d="…"/>
</svg>

13. Widgets

Embed anywhere in Markdown with {​{ widget_name }} or {​{ widget_name: argument }}.

Clock

Displays Python server time — polls /api/clock every second.

{​{ clock }}

Task Progress

Scans the current file for - [x] and - [ ] checkboxes and draws a live progress bar. Checkboxes are clickable — they write directly back to the .md file.

{​{ task_progress }}

Sine Graph

Interactive HTML5 canvas — drag sliders to update $A$, $B$, $C$, $D$ live.

{​{ sine_graph }}

File Index

Lists every .md file inside a folder as clickable cards.

{​{ file_index: . }}           ← entire project root
{​{ file_index: experiments }} ← subfolder only
{​{ file_index: projects }}    ← another subfolder

Project Status

Renders a custom status block defined in widgets/project_status.py.

{​{ project_status }}

Custom Widget — Minimal Template

Create widgets/my_widget.py — the server hot-reloads it automatically:

# widgets/my_widget.py
def render(context=None, argument=None) -> str:
    # context keys available:
    #   project_root       → Path to project directory
    #   current_md_file    → Path to the current .md file
    #   list_markdown_files → callable(base_dir) → list[Path]
    #   md_url_for_file    → callable(Path) → str
    #   safe_project_path  → callable(str) → Path | None

    label = argument or "My Widget"
    return f"""
<div class="py-widget">
  <div class="widget-label">{label}</div>
  <p>Put your custom HTML here.</p>
</div>
"""

Then embed with:

{​{ my_widget }}
{​{ my_widget: Custom Label }}

14. Math — KaTeX

Inline and display

Inline $...$, display block $$...$$, and captioned equations with cross-reference IDs.

Inline: $\mathcal{L} = -\sum_i y_i \log \hat{y}_i$, $E = mc^2$, $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

See Equation 14.1.

<!-- Inline math -->
The loss $\mathcal{L} = -\sum_i y_i \log \hat{y}_i$ decreases as training progresses.

<!-- Display block (centered, larger) -->
$$
\theta \leftarrow \theta - \eta \cdot \nabla_\theta \mathcal{L}(\theta)
$$

<!-- Standalone $ block — shorthand display math -->
$
C = B \log_2\!\left(1 + \frac{S}{N}\right)
$

<!-- Captioned equation with cross-reference ID -->
<div id="eq-l1-my-id" class="caption-box caption-equation">
<div class="caption-content">
$
\mathcal{L}(y, \hat{y}) = -\frac{1}{N} \sum_{i=1}^{N}
  \Bigl[ y_i \log \hat{y}_i + (1 - y_i) \log(1 - \hat{y}_i) \Bigr]
$
</div>
<div class="caption-title"><span class="caption-label">Equation</span>: Equation label here</div>
</div>

<!-- Reference it anywhere -->
See @eq-l1-my-id.

KaTeX size comparison

Each row pairs a KaTeX expression with plain text at the same level.

Fractions, sums, integrals

Limits & derivatives

Probability & statistics

Greek letters & common symbols

$$\alpha \beta \gamma \delta \epsilon \zeta \eta \theta \iota \kappa \lambda \mu$$ $$\nu \xi \pi \rho \sigma \tau \upsilon \phi \chi \psi \omega$$ $$\Gamma \Delta \Theta \Lambda \Xi \Pi \Sigma \Upsilon \Phi \Psi \Omega$$

Math in a table

Superscripts & subscripts — all patterns

15. Math Priority Classes

Use .math-text (italic variable) and .math-op (upright operator) when KaTeX isn't available — inside Mermaid labels, SVG <tspan>, or plain HTML.

SVG — inline <tspan> with math classes

SVG diagram — labeled neuron

<!-- In a span or table cell -->
<span class="math-text">σ</span>(<span class="math-text">z</span>) = 1 / (1 + <span class="math-op">exp</span>(−<span class="math-text">z</span>))

<!-- In an SVG <tspan> -->
<text font-family="SF Pro Display, system-ui, sans-serif">
  <tspan class="math-text">θ</tspan> ← <tspan class="math-text">θ</tspan> − <tspan class="math-text">η</tspan> ∇<tspan class="math-text">L</tspan>(<tspan class="math-text">θ</tspan>)
</text>

16. Mermaid Diagrams

Wrap any Mermaid syntax in ```mermaid fences. The server injects the CDN script automatically. Use $$...$$ for math inside diagram labels.

Flowchart — Left to Right

Flowchart — Top to Bottom with node shapes

Flowchart — Subgraphs / Clusters

Flowchart with KaTeX labels

Sequence Diagram with autonumber

Sequence with KaTeX labels

State Diagram

Pie Chart

Class Diagram

Gantt Chart

Entity Relationship Diagram

See Figure 16.5.

<!-- Basic flowchart -->

<div class="mermaid">
flowchart LR
  A --> B --> C

%% -- dashboard status styles --
classDef ok fill:#DCFCE7,stroke:#16A34A,stroke-width:1.5px,color:#052E16;
classDef warn fill:#FEF9C3,stroke:#CA8A04,stroke-width:1.5px,color:#422006;
classDef err fill:#FCE7EF,stroke:#DB2777,stroke-width:1.5px,color:#500724;
classDef crit fill:#FEE2E2,stroke:#DC2626,stroke-width:1.5px,color:#450A0A;
classDef off fill:#F1F5F9,stroke:#94A3B8,stroke-width:1.5px,color:#111827;
classDef info fill:#EFF6FF,stroke:#3B82F6,stroke-width:1.5px,color:#0C1E3E;
</div>


<!-- Flowchart with KaTeX node labels -->

<div class="mermaid">
flowchart LR
  A["$$\text{Input}\ x$$"] --> B["Layer 1"] --> C["$$\text{Output}\ \hat{y}$$"]

%% -- dashboard status styles --
classDef ok fill:#DCFCE7,stroke:#16A34A,stroke-width:1.5px,color:#052E16;
classDef warn fill:#FEF9C3,stroke:#CA8A04,stroke-width:1.5px,color:#422006;
classDef err fill:#FCE7EF,stroke:#DB2777,stroke-width:1.5px,color:#500724;
classDef crit fill:#FEE2E2,stroke:#DC2626,stroke-width:1.5px,color:#450A0A;
classDef off fill:#F1F5F9,stroke:#94A3B8,stroke-width:1.5px,color:#111827;
classDef info fill:#EFF6FF,stroke:#3B82F6,stroke-width:1.5px,color:#0C1E3E;
</div>


<!-- Sequence diagram with math labels -->

<div class="mermaid">
sequenceDiagram
  participant D as Dataset
  participant M as Model
  D->>M: $$\text{batch}\ (x, y)$$
  M->>M: $$\text{forward pass} \to \hat{y}$$
</div>


<!-- Captioned mermaid figure -->
<div id="fig-l1-my-diagram" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">

<div class="mermaid">
flowchart TD
  X --> L1 --> L2 --> Y

%% -- dashboard status styles --
classDef ok fill:#DCFCE7,stroke:#16A34A,stroke-width:1.5px,color:#052E16;
classDef warn fill:#FEF9C3,stroke:#CA8A04,stroke-width:1.5px,color:#422006;
classDef err fill:#FCE7EF,stroke:#DB2777,stroke-width:1.5px,color:#500724;
classDef crit fill:#FEE2E2,stroke:#DC2626,stroke-width:1.5px,color:#450A0A;
classDef off fill:#F1F5F9,stroke:#94A3B8,stroke-width:1.5px,color:#111827;
classDef info fill:#EFF6FF,stroke:#3B82F6,stroke-width:1.5px,color:#0C1E3E;
</div>

</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Diagram caption</div>
</div>

17. Complex Math

KaTeX environments for matrices, piecewise functions, aligned derivations, and multi-index sums.

Matrix multiplication

Piecewise function

Aligned equations

Double summation

Matrix form

Channel matrix

<!-- Piecewise function -->
$$
f(z) = \begin{cases} z & z > 0 \cr 0 & z \leq 0 \end{cases}
$$

<!-- Aligned equations -->
$$
\begin{aligned}
\frac{\partial \mathcal{L}}{\partial W} &= \frac{\partial \mathcal{L}}{\partial \hat{y}} \cdot \frac{\partial \hat{y}}{\partial z} \cdot \frac{\partial z}{\partial W} \\
  &= (\hat{y} - y) \cdot \sigma'(z) \cdot x
\end{aligned}
$$

<!-- Matrix -->
$$
\begin{pmatrix} z_1 \\ z_2 \end{pmatrix} =
\begin{pmatrix} w_{11} & w_{12} \\ w_{21} & w_{22} \end{pmatrix}
\begin{pmatrix} x_1 \\ x_2 \end{pmatrix} + \begin{pmatrix} b_1 \\ b_2 \end{pmatrix}
$$

18. Math Charts

Hand-crafted SVG charts with precise mathematical curves and KaTeX-style labels.

Activation Functions — σ(z), tanh(z), ReLU(z)

Normal Distribution — $\mathcal{N}(0,1)$

Interactive — Sine Wave Explorer

Drag any slider to update the curve in real time: $y = A \cdot \sin(Bx + C) + D$

Interactive — Gradient Descent on $\mathcal{L}(\theta) = \theta^2$

Click the curve to set a starting point, adjust the learning rate, then step or animate.

19. Captions & Cross-References

Use :::caption to create numbered figures, tables, and equations. Reference them with @type-id anywhere — cross-file links open in a new tab with ↗.

Caption syntax

<!-- Figure -->
<div id="fig-l1-my-id" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-md img-center">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Figure caption text</div>
</div>

<!-- Table -->
<div id="tab-l1-my-id" class="caption-box caption-table" markdown="1">
<div class="caption-content" markdown="1">
| Col A | Col B |
|---|---|
| val | val |
</div>
<div class="caption-title"><span class="caption-label">Table</span>: Table caption text</div>
</div>

<!-- Equation -->
<div id="eq-l1-my-id" class="caption-box caption-equation">
<div class="caption-content">
$
\mathcal{L}(y, \hat{y}) = -\frac{1}{N}\sum_{i=1}^{N} y_i \log\hat{y}_i
$
</div>
<div class="caption-title"><span class="caption-label">Equation</span>: Equation name</div>
</div>

<!-- Reference anywhere in any .md file -->
See @fig-l1-my-id, @tab-l1-my-id, and @eq-l1-my-id.

All reference types

Figure width containers

<!-- Narrow (480px) -->
<div class="fig-narrow" markdown="1">
<div id="fig-l1-id" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-full">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Caption</div>
</div>
</div>

<!-- Mid (700px) -->
<div class="fig-mid" markdown="1">
<div id="fig-l1-id" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-full">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Caption</div>
</div>
</div>

<!-- Wide (1000px) -->
<div class="fig-wide" markdown="1">
<div id="fig-l1-id" class="caption-box caption-figure" markdown="1">
<div class="caption-content" markdown="1">
<img src="/images/file.svg" class="img-full">
</div>
<div class="caption-title"><span class="caption-label">Figure</span>: Caption</div>
</div>
</div>

20. Sentence Anchors

Anchor any sentence with <span id="par-l1-id" class="sentence-anchor">text.</span> — the | label controls what @par-l1-id displays as. Must be on a single line.

During training, the model computes a forward pass to produce predictions $\hat{y}$, then backpropagates the error to compute gradients. This cycle repeats for every batch.

The key insight is that gradient descent works because the loss surface is locally approximated as a quadratic bowl — the gradient points toward steepest ascent, so stepping opposite reduces the loss.

Choosing the right learning rate $\eta$ is critical: too large and the optimizer overshoots; too small and training takes impractically long.

Jump to: forward pass · why it works · learning rate

[The sentence to anchor.]{#par-l1-my-id | display label}

Reference it anywhere: @par-l1-my-id

21. Task Lists

GitHub-style checkboxes — [x] for done, [ ] for pending. Checkboxes are clickable — they write directly back to the .md file via the server's toggle-checkbox endpoint.

• Typography & headings
• Font weights · colors · backgrounds
• Note cards · code blocks · badges
• Tables — standard, narrow, mid, compact, captioned
• Images — sizes, alignment, float, captions, SVG tricks
• KaTeX math — inline and display
• Math priority classes — .math-text / .math-op
• Mermaid diagrams — all types with math labels
• Cross-references and captions
• Sentence anchors with custom labels
• Widget demos
• Feature combinations

- [x] Completed task
- [x] Another finished item
- [ ] Still to do
- [ ] Another pending item

22. Inline Text Styles

Strikethrough, highlight, change tracking, abbreviations

The old learning rate was 0.1 new default is 0.001. Batch size 512 → 256 works better.

The most important step is normalizing inputs before training. Without it, gradients can explode.

Batch size: 512 256. Learning rate: 0.01 0.001. Optimizer: SGD Adam.

SGD is slower than Adam but generalizes better. ReLU is the default activation.

Keyboard keys

Save: Cmd + S · Run: Shift + Enter · Comment: Cmd + / · Find: Cmd + F

~~strikethrough~~

<mark>highlighted text</mark>

<del>removed</del> <ins>added</ins>

<abbr title="Full Expansion">Abbr</abbr>

<kbd>Cmd</kbd> + <kbd>S</kbd>

23. Nested Lists

Indent 4 spaces per level — mix ordered and unordered at any depth.

• Optimization algorithms
  • First-order (gradient-based)
    • SGD, Adam, RMSProp
    • Require only $\nabla_\theta \mathcal{L}$
  • Second-order (curvature-based)
    • Newton's method, L-BFGS
    • Require Hessian $\nabla^2 \mathcal{L}$

• Regularization techniques

  • L1 / L2 weight decay
  • Dropout — randomly zero activations
  • Early stopping

• Define the model architecture

  1. Choose depth and width
  2. Pick activation functions
     1. ReLU for hidden layers
     2. Softmax for output
• Prepare the data
  • Normalize features to $[0,1]$ or $\mathcal{N}(0,1)$
  • Split into train / val / test
• Train and evaluate

- Level 1 item
    - Level 2 item
        - Level 3 item

1. Ordered item
    1. Nested ordered
        - Unordered sub-item
2. Back to top level

24. Collapsible Sections

<details> / <summary> — content supports full markdown, math, and code blocks.

<details>
<summary>Section title (click to expand)</summary>

Content here — supports **bold**, *italic*, $math$, and code blocks.

$$\frac{\partial \mathcal{L}}{\partial W} = (\hat{y} - y) \cdot x$$

</details>

25. Multi-column Layout

Responsive grid cards — col-2, col-3, col-4 collapse to a single column on mobile. Add markdown="1" when content uses markdown.

2 columns

3 columns

4 columns — stat cards with badges

<!-- 2-column layout -->
<div class="col-2" markdown="1">
<div class="col-card" markdown="1">

**Left card** — supports full **markdown** and $math$.

</div>
<div class="col-card" markdown="1">

**Right card** — collapses to 1 column on mobile.

</div>
</div>

<!-- 3-column layout -->
<div class="col-3" markdown="1">
<div class="col-card" markdown="1">Column A</div>
<div class="col-card" markdown="1">Column B</div>
<div class="col-card" markdown="1">Column C</div>
</div>

<!-- 4-column stat cards -->
<div class="col-4">
<div class="col-card">
  <div class="b3 text-muted">Metric label</div>
  <div style="font-size:1.6rem;font-weight:700">value</div>
  <span class="badge badge-green">↑ change</span>
</div>
</div>

26. Progress Bars & Meters

Inline CSS bars — pair a track div with a fill div and set width as a percentage.

Labeled bars

Gradient bar with header

Segmented / stacked bar

<!-- Labeled bar -->
<div style="display:flex;align-items:center;gap:12px;margin:10px 0">
  <span style="width:80px;font-size:13px;color:#475569">Label</span>
  <div style="flex:1;background:#F1F5F9;border-radius:999px;height:8px">
    <div style="background:#2563EB;height:8px;border-radius:999px;width:75%"></div>
  </div>
  <span style="font-size:13px;font-weight:600;color:#2563EB;width:36px">75%</span>
</div>

<!-- Gradient bar with header -->
<div style="display:flex;justify-content:space-between;margin-bottom:6px">
  <span style="font-size:13px;font-weight:600">Progress label</span>
  <span style="font-size:13px;color:#6B7280">47 / 100</span>
</div>
<div style="background:#F1F5F9;border-radius:999px;height:12px">
  <div style="background:linear-gradient(to right,#2563EB,#7C3AED);height:12px;border-radius:999px;width:47%"></div>
</div>

<!-- Segmented bar -->
<div style="display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px">
  <div style="background:#2563EB;width:60%">Train 60%</div>
  <div style="background:#16A34A;width:20%">Val 20%</div>
  <div style="background:#EA580C;width:20%">Test 20%</div>
</div>

27. Dividers & Separators

Plain horizontal rule

Gradient divider

Short accent bar

Labeled divider

Dotted separator

Icon-centered divider

<!-- Plain rule -->
---

<!-- Gradient divider -->
<div style="height:2px;background:linear-gradient(to right,transparent,#2563EB,transparent);margin:24px 0"></div>

<!-- Short accent bar -->
<div style="height:3px;background:#2563EB;width:60px;border-radius:999px;margin:16px 0"></div>

<!-- Labeled divider -->
<div style="display:flex;align-items:center;gap:12px;margin:20px 0">
  <div style="flex:1;height:1px;background:#E5E7EB"></div>
  <span style="font-size:12px;color:#9CA3AF;font-weight:500">LABEL</span>
  <div style="flex:1;height:1px;background:#E5E7EB"></div>
</div>

<!-- Dotted separator -->
<div style="border-top:2px dashed #E5E7EB;margin:20px 0"></div>

28. Timeline

A left-border div with color-coded dot markers — change the dot background per step. Supports inline math.

<div style="border-left:2px solid #E5E7EB;padding-left:20px;margin:16px 0">

  <div style="position:relative;margin-bottom:24px">
    <div style="position:absolute;left:-27px;top:4px;width:10px;height:10px;
                border-radius:50%;background:#2563EB;border:2px solid white;
                box-shadow:0 0 0 2px #2563EB"></div>
    <div style="font-weight:600">Event title</div>
    <div class="b3 text-muted">Subtitle or date</div>
    <div style="margin-top:4px;font-size:14px;color:#475569">
      Description — supports inline $math$ naturally.
    </div>
  </div>

  <!-- Repeat for each step, changing background color -->

</div>

29. File Links & VS Code

Open a file in VS Code

[Open dashboard_server.py](/open-file?path=dashboard_server.py)
[Open style.css](/open-file?path=style.css)
[Open widgets/clock.py](/open-file?path=widgets/clock.py)

Open dashboard_server.py · Open style.css · Open widgets/clock.py

Link between Markdown files

Relative .md links are automatically rewritten to /md/ dashboard URLs — works regardless of folder depth.

[Go to index](index.md)
[Notes](notes.md)
[Experiments](experiments/index.md)
[Project](projects/my_project.md)

Export to standalone HTML

Append ?export to any /md/ URL in the browser:

http://localhost:8030/md/guide.md?export

Generates guide_output.html in the project root — fully self-contained (CSS inlined, no server needed).

30. Feature Combinations

Real-world examples showing multiple features working together.

Note card + math + table

Colored title + Mermaid + caption

See Figure 30.1 for the full session flow.

Note cards in a workflow

sudo systemctl start open5gs-amfd open5gs-smfd open5gs-upfd

journalctl -u open5gs-amfd -f | grep "gNB"

Weight + color status table

Mixed layout — b1 title + note + equation + table + code

The goal is to minimize $\mathcal{L}(\theta)$ by iteratively stepping in the direction of the negative gradient.

for epoch in range(n_epochs):
    for x_batch, y_batch in dataloader:
        loss = model(x_batch, y_batch)
        loss.backward()
        optimizer.step()
        optimizer.zero_grad()

31. Quick Reference Card

Capability & Architecture Report

This document considers the potential of the uploaded Markdown dashboard system as a technical documentation, AI-learning, RAN-engineering, and project-reporting workspace. It is designed for your current renderer, using native caption blocks, cross-references, Mermaid diagrams, Chart.js visualizations, KaTeX equations, and structured tables.

The key potential is that one .md file can become a live technical dashboard: explanation, diagrams, formulas, tables, charts, and references stay together in one maintainable source.

1. Executive summary

Your current setup has strong potential because it combines:

• Markdown for fast writing and version control.
• Mermaid for architecture, flow, sequence, and state diagrams.
• Chart.js for quantitative visualizations.
• KaTeX/LaTeX for equations.
• Caption blocks for figures, tables, and equations.
• Automatic cross-references like Figure 2.1, Table 3.1, and Equation 7.1.
• Custom CSS for professional dashboard styling.

The result is not just a static note. It can be used as a living engineering report.

As shown in Table 1.1, the strongest value is for topics where technical explanation + visual structure + formulas + measurable data must live together.

2. Rendering pipeline potential

The dashboard acts like a lightweight local publishing system. A Markdown file is read, preprocessed, converted to HTML, styled, and then enriched in the browser with Mermaid, Chart.js, and KaTeX.

Figure 2.1 shows the main advantage: authoring remains simple, while the final output becomes visually rich.

3. Main capability matrix

Table 3.1 is the reason this system is suitable for your RAN, AI, SDR, and troubleshooting documentation workflows.

4. System architecture view

The system in Figure 4.1 can grow into a full local technical documentation portal. The most important design decision is that the source stays as Markdown, not a heavy database or CMS.

5. Request sequence

Figure 5.1 shows why the workflow feels fast: the Python side prepares the structure, while the browser renders the visual layers.

6. State model

The state model in Figure 6.1 is useful when debugging live reload, missing references, or rendering problems.

7. Quantitative potential model

A simple potential score can combine four factors:

Where:

• $P$ = total potential score.
• $V$ = visual expressiveness.
• $M$ = maintainability.
• $R$ = reusability.
• $A$ = automation readiness.

For this dashboard, a reasonable qualitative estimate is:

Using Equation 7.1 and Table 7.1:

So the current dashboard potential is approximately 8.1 / 10, assuming it is used for technical documentation and not only for simple notes.

8. Chart.js example: potential score by capability

The following Chart.js block is wrapped in a caption, so it can be referenced as Figure 8.1.

The strongest individual capability in Figure 8.1 is the cross-reference system, because it turns normal notes into report-style documentation.

9. Chart.js example: maturity roadmap

Figure 9.1 suggests that the next growth area is automation maturity, especially if Python widgets are expanded.

10. Mermaid journey: authoring experience

Figure 10.1 shows that the system supports an iterative workflow: write first, then structure, then visualize.

11. Recommended folder structure

The folder structure in Figure 11.1 keeps the dashboard scalable without making it complicated.

12. Best Markdown patterns

Table 12.1 is the most important practical table if you continue building reusable Markdown reports.

13. Equation examples for AI and RAN notes

For AI/ML documentation, the dashboard can show cost functions clearly:

For KPI or alarm scoring, you can define weighted severity:

Where $A_c$ is critical alarm count, $A_m$ is major alarm count, $T_d$ is duration, and $I_k$ is KPI impact. Equation 13.2 is useful for RAN troubleshooting reports.

14. Example RAN troubleshooting flow

Figure 14.1 can become a standard template for your AirScale, Airspan, Ericsson, or Huawei troubleshooting notes.

15. Arrow-label diagrams for process explanations

Yes — for many engineering diagrams, the most important information is not only the node, but the relationship between two nodes. Mermaid supports this by placing text directly on the arrow. This makes the diagram more readable because the arrow explains what action, data, check, or dependency connects two blocks.

As shown in Figure 15.1, the text between |...| appears in the middle of the arrow. This is useful for explaining data flow, troubleshooting logic, or decision paths.

Figure 15.2 is closer to what you mean: the arrow itself explains the reason or action between two troubleshooting steps.

Figure 15.3 can be reused as a template for future technical reports.

The syntax in Table 15.1 is the cleanest way to create the diagram style you described.

16. Risk and limitation table

Table 16.1 is not a blocker. These are normal maintainability risks for any lightweight documentation system.

17. Recommended development roadmap

The roadmap in Table 17.1 would turn the dashboard from a viewer into a personal technical knowledge platform.

18. Final recommendation

The dashboard has high potential for your work because it matches your learning and engineering style:

• You like math + practical implementation.
• You often need technical diagrams.
• You work with RAN, 5G, alarms, KPIs, Kubernetes, SDR, and Python.
• You need reusable documentation that can become a professional report.

My recommendation is to use this dashboard as your main format for:

1. AI learning notes.
2. 5G lab documentation.
3. RAN troubleshooting RCA reports.
4. KPI dashboard explanations.
5. SDR experiment logs.
6. Technical meeting preparation.

The most valuable feature is not only the visual rendering. It is the combination of captions + references + equations + charts in one Markdown file. That combination makes the document feel like a small technical paper, but keeps the editing workflow simple.

19. Math display comparison

This section compares the main ways to show math inside the dashboard. The goal is to decide which math style is best for explanation, reporting, tables, diagrams, and code documentation.

19.1 Inline math inside normal text

Inline math is best when the formula is part of a sentence. For example, in linear regression, the prediction is written as $\hat{y} = w x + b$, where $w$ is the weight and $b$ is the bias.

Inline math should be used for short variables, short formulas, and references inside paragraphs. It keeps the reading flow natural.

19.2 Display equation without caption

Display math is better when the formula needs visual focus but does not need a formal reference.

This is clean for learning notes, but it cannot be referenced later unless it is wrapped in a caption block.

19.3 Captioned equation with cross-reference

A captioned equation is the best option for professional reports because it can be referenced later, like Equation 19.2.

Use this style when the equation is important and you want to refer to it from another section.

19.4 Multi-line aligned equation

For derivations, aligned equations are more readable than writing everything in one line. Equation 19.3 shows a compact gradient-descent update structure.

Equation 19.3.1 updates the weight parameter and Equation 19.3.2 updates the bias. Both rows together define one gradient descent step.

19.5 Math inside tables

Math inside tables is useful for comparing formulas, symbols, and meanings. Table 19.1 shows a clean table format.

Use table math when formulas need comparison, not derivation.

19.6 Mermaid process diagram with equation references

Mermaid should be used for process structure, arrows, and relationships. For standard math typography, keep formulas outside Mermaid and reference proper LaTeX/KaTeX equations.

The exact formulas for Figure 19.1 are shown separately in Equation 19.4, Equation 19.5, and Equation 19.6. This is the most standard approach because Mermaid draws the workflow, while KaTeX renders the mathematics.

19.7 Standard mathematical display only — avoid SVG text for formulas

The previous SVG/HTML-style card is not recommended for real mathematical notation. Even if it looks similar, SVG text or manually styled HTML can produce non-standard symbols, wrong spacing, and inconsistent hats, fractions, superscripts, and subscripts.

The most standard approach is:

1. Use Mermaid only for the process structure.
2. Use LaTeX/KaTeX equations separately for the mathematical definitions.
3. Cross-reference the diagram and the equations together.

This gives clean diagram logic and proper mathematical typography.

The mathematical content of Figure 19.2 is then written with real LaTeX/KaTeX equations, not as SVG text.

In Equation 19.4, Equation 19.5, and Equation 19.6, the symbols are rendered by KaTeX using real LaTeX syntax. This is the cleanest and most mathematically standard option.

The key point is: do not type symbols such as ŷ manually for formal math. Use \hat{y} inside LaTeX instead.

19.8 Code-style math display

Sometimes the goal is not to render the formula beautifully, but to show exactly what should be typed in Python, NumPy, or pseudo-code.

# Linear model prediction
y_hat = w * x + b

# Mean squared error
J = (1 / (2 * m)) * sum((y_hat[i] - y[i])**2 for i in range(m))

Use code-style math for implementation notes. Do not use it as the main explanation style for theoretical formulas.

19.9 Comparison table for math display methods

Table 19.3 compares the main options.

The best default choice is: inline math for sentences, captioned equations for important formulas, table math for comparison, and Mermaid only for process diagrams. Do not place formal formulas inside Mermaid/SVG text.

19.10 Decision flow for choosing math display style

Figure 19.4 gives a practical selection rule.

The decision flow in Figure 19.4 keeps future documents consistent.

20. LaTeX-style math format

This section shows the recommended standard LaTeX/KaTeX style for mathematical notation in the dashboard. The goal is to avoid manual Unicode symbols such as ŷ, β, ∑, or visually styled SVG text when the content is mathematically important. For formal math, write the formula in LaTeX and let KaTeX render it.

20.1 Recommended rule

Use LaTeX syntax for all real math and use Mermaid only for the process/flow around the math.

As a simple rule: if the symbol has mathematical meaning, use LaTeX.

20.2 LaTeX-style display block template

Use this exact structure when you want a formula to look like normal LaTeX in the dashboard. The important part is that the formula is inside $$...$$, not inside SVG text, Unicode text, or a Mermaid node.

For derivations, use an aligned LaTeX environment:

Use Equation 20.1 or Equation 20.2 as the pattern for any formal mathematical section.

20.3 Inline LaTeX style

Use inline math for short notation inside a sentence. For example, the model receives an input vector $\mathbf{x}$, applies parameters $w$ and $b$, and produces the prediction $\hat{y}$.

Good inline examples:

The prediction is $\hat{y}$.
The input vector is $\mathbf{x}$.
The learning rate is $\alpha$.
The cost is $J(w,b)$.

20.4 Captioned LaTeX equation style

Use captioned equations for formulas that you want to reference later. Equation 20.3 shows a clean LaTeX-style linear model.

The prediction equation in Equation 20.3 is better than writing ŷ = wx + b because the hat, superscript sample index, spacing, and variables are rendered by the math engine.

20.5 Aligned derivation style

For step-by-step math, use aligned. Equation 20.4 shows standard notation for gradient descent.

This is the preferred format for ML notes because the arrows, derivatives, and alignment are mathematically consistent.

20.6 Cost-function style

Use fractions and summations in LaTeX instead of plain-text approximations. Equation 20.5 is the recommended style.

This is clearer than J(w,b)=1/2m sum((yhat-y)^2) because the fraction, summation limits, and exponent are displayed in standard mathematical form.

20.7 Matrix and vector style

For neural networks and linear algebra, prefer bold vectors/matrices and proper matrix environments. Equation 20.6 shows the recommended notation.

For explicit matrix display, use bmatrix as shown in Equation 20.7.

20.8 Piecewise function style

Use cases for piecewise definitions. Equation 20.8 shows a clean ReLU definition.

Notice that \operatorname{ReLU} keeps the operator upright instead of italicizing it like a variable.

20.9 Diagram plus standard equation style

For diagrams, keep Mermaid labels simple and reference the real equation separately. Figure 20.1 shows the process, while Equation 20.3 gives the exact math.

This combination is usually the best dashboard style: Mermaid explains the workflow, LaTeX explains the math.

20.10 LaTeX syntax cheat sheet

20.11 Final recommendation

For this dashboard, the cleanest professional format is:

1. Use $...$ for inline math.
2. Use $$...$$ for display math.
3. Use :::caption type="equation" for referenceable formulas.
4. Use Mermaid for flows and arrows, not for formal formulas.
5. Avoid manual Unicode math symbols in SVG/HTML unless they are only decorative.

21. Advanced LaTeX patterns for technical reports

This section adds more LaTeX patterns that are useful for AI, RAN KPI analysis, RF engineering, optimization, and signal processing notes.

21.1 Vectorized linear regression

For machine-learning notes, vectorized notation is cleaner than writing one sample at a time.

In Equation 21.1, $\mathbf{X}$ is the feature matrix, $\mathbf{w}$ is the weight vector, and $\mathbf{1}$ is a vector of ones.

21.2 Logistic regression and sigmoid

For classification, show the score and activation separately.

Equation 21.2 is a good example of using upright function notation and aligned equations.

21.3 Cross-entropy loss

For binary classification, use cross-entropy instead of mean squared error.

Use Equation 21.3 when documenting logistic regression or neural-network binary classifiers.

21.4 Softmax notation

For multi-class classification, use \operatorname{softmax} so the function name stays upright.

21.5 RF and signal-processing notation

For SDR and wireless notes, complex baseband notation is useful.

Equation 21.5 and Equation 21.6 are useful for SDR, DVB-S2, LTE, and 5G physical-layer notes.

21.6 KPI normalization equation

For KPI dashboards, normalize mixed metrics before combining them.

A KPI score can then combine normalized metrics as shown in Equation 21.8.

21.7 LaTeX quality checklist

22. More Mermaid diagram templates

This section adds reusable Mermaid diagram templates for engineering reports. The key idea is to use Mermaid for structure, dependency, state, sequence, and decision logic, while keeping formal formulas in LaTeX sections.

22.1 RCA fishbone-style diagram

Use Figure 22.1 when the report needs to compare possible root-cause families.

22.2 Evidence chain diagram

Figure 22.2 is useful for making an RCA report defensible.

22.3 Kubernetes troubleshooting flow

22.4 C4-style local dashboard context

Figure 22.4 is a high-level architecture diagram for documentation of the dashboard project itself.

22.5 Diagram selection table

23. More Chart.js templates

This section adds more Chart.js patterns for KPI and report dashboards.

23.1 Pie chart for report content mix

23.2 Radar chart for dashboard capability profile

23.3 Scatter chart for complexity versus value

23.4 Chart selection table

24. Reusable technical report template

This section gives a reusable structure for future reports.

24.1 RCA mini-template

24.2 Command-output documentation pattern

For Linux, Kubernetes, or RAN CLI outputs, keep a short command block and a short interpretation below it.

# Example command
kubectl get pods -A -o wide

Expected interpretation:
- Pod state should be Running or Completed.
- Node assignment should match the planned CU/DU role.
- Restart count should not continuously increase.

25. Quality-control checklist before publishing

Before you consider a Markdown dashboard report final, run the following checks.

Figure 25.1 is a practical final check before using the file as a real report.

26. Reference index

This section intentionally references the most important items so you can test cross-link behavior:

• Rendering pipeline: Figure 2.1
• System architecture: Figure 4.1
• Request sequence: Figure 5.1
• Dashboard state model: Figure 6.1
• Basic arrow-label flow: Figure 15.1
• RAN arrow-label flow: Figure 15.2
• Dashboard decision workflow: Figure 15.3
• Capability matrix: Table 3.1
• Potential formula: Equation 7.1
• Potential result: Equation 7.2
• Capability chart: Figure 8.1
• Roadmap chart: Figure 9.1
• Authoring patterns: Table 12.1
• Math display comparison: Section 19
• Linear model equation: Equation 19.2
• Gradient descent update: Equation 19.3
• Gradient descent — weight update: Equation 19.3.1
• Gradient descent — bias update: Equation 19.3.2
• Math symbols table: Table 19.1
• Mermaid process-equation flow: Figure 19.1
• Code-style math: Figure 19.3
• Math display comparison table: Table 19.3
• Math display decision flow: Figure 19.4
• LaTeX-style math format: Section 20
• LaTeX rule table: Table 20.1
• LaTeX display block template: Equation 20.1
• LaTeX aligned template: Equation 20.2
• Standard linear model: Equation 20.3
• Standard gradient descent: Equation 20.4
• Standard cost function: Equation 20.5
• Matrix-vector equation: Equation 20.6
• ReLU cases equation: Equation 20.8
• LaTeX style flow: Figure 20.1
• LaTeX cheat sheet: Table 20.2
• Advanced LaTeX patterns: Section 21
• Vectorized linear regression: Equation 21.1
• Logistic regression: Equation 21.2
• Binary cross-entropy: Equation 21.3
• Softmax equation: Equation 21.4
• Complex baseband equation: Equation 21.5
• OFDM symbol equation: Equation 21.6
• KPI normalization: Equation 21.7
• Weighted KPI score: Equation 21.8
• LaTeX quality checklist: Table 21.1
• More Mermaid templates: Section 22
• RCA fishbone diagram: Figure 22.1
• Evidence chain diagram: Figure 22.2
• Kubernetes troubleshooting flow: Figure 22.3
• C4 dashboard context: Figure 22.4
• Diagram selection table: Table 22.1
• More Chart.js templates: Section 23
• Report content mix chart: Figure 23.1
• Dashboard radar profile: Figure 23.2
• Complexity-value scatter chart: Figure 23.3
• Chart selection table: Table 23.1
• Technical report template: Table 24.1
• RCA mini-template: Table 24.2
• Command-output pattern: Figure 24.1
• Publishing checklist: Table 25.1
• Report finalization flow: Figure 25.1
• Main idea passage: main idea

Chart & Diagram Gallery

Reference implementations of the gallery's charts and flowcharts. Every figure below is captioned and auto-numbered by section.

Neural Network Flowchart

Spectrum Allocation by Slice

As shown in Figure 2.1, eMBB receives the largest spectrum share.

Active Users & Throughput — Mixed Bar + Line

Active Users & Throughput — Hand-built SVG Chart

Latency vs. Throughput — SVG Scatter

UE Connection State Chart