You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content_templates/template-how-to.md
+19-12Lines changed: 19 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,30 @@ toc: true
9
9
10
10
One sentence: what you will achieve.
11
11
12
-
{{< callout type="note" >}}
13
-
**You will end up with**
12
+
## You'll end up with
14
13
15
14
- A concrete outcome (artifact/config/state)
16
15
- A verifiable success condition
17
-
{{< /callout >}}
18
16
19
17
**Estimated time:**~X minutes
20
18
19
+
## Workflow (optional)
20
+
21
+
Include a diagram only if it clarifies the process. Keep it simple (3–5 nodes max).
22
+
23
+
```mermaid
24
+
flowchart LR
25
+
A[Input] --> B[ocm command] --> C[Output]
26
+
27
+
style A fill:#e1f5ff,color:#000
28
+
style B fill:#fff4e6,color:#000
29
+
style C fill:#e8f5e9,color:#000
30
+
```
31
+
32
+
One sentence explaining what this diagram shows.
33
+
34
+
See [Diagram Color Guide]({{< relref "content_templates/template-tutorial.md#diagram-color-guide" >}}) for consistent styling across all documentation.
Copy file name to clipboardExpand all lines: content_templates/template-tutorial.md
+70-26Lines changed: 70 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,27 +14,82 @@ hasMermaid: true
14
14
```
15
15
{{< /callout >}}
16
16
17
-
## Overview
18
-
19
-
Write 2–4 sentences that set the scene and explain *why* you would do this.
17
+
Write 1–2 sentences that set the scene and explain *why* you would do this.
20
18
Avoid deep background. Link to the relevant concept(s) instead.
21
19
22
-
**Estimated time:**~X minutes
20
+
## What You'll Learn
23
21
24
-
{{< callout type="note" >}}
25
-
**What you'll learn**
22
+
By the end of this tutorial, you will:
26
23
27
24
- What you can do by the end (outcome #1)
28
25
- One key concept you will understand (outcome #2)
29
26
- How to validate your success (outcome #3)
30
-
{{< /callout >}}
31
27
32
-
{{< callout type="note" >}}
33
-
**Audience & assumptions**
28
+
## How It Works
34
29
35
-
- Who this tutorial is for (e.g., "You're an OCM CLI user who has already created a component version")
36
-
- What we assume you already know
37
-
{{< /callout >}}
30
+
```mermaid
31
+
flowchart LR
32
+
A[Input/Start] -- "command" --> B[OCM Artifact]
33
+
B -- "command" --> C[(Output/Registry)]
34
+
35
+
style A fill:#e1f5ff,color:#000
36
+
style B fill:#fff4e6,color:#000
37
+
style C fill:#e8f5e9,color:#000
38
+
```
39
+
40
+
Write 1–2 sentences explaining the workflow shown in the diagram.
41
+
42
+
**Estimated time:**~X minutes
43
+
44
+
### Diagram Style Guide
45
+
46
+
Choose the appropriate style for your diagram based on complexity and purpose:
47
+
48
+
#### Style 1: Minimal (Recommended for simple workflows)
49
+
50
+
Use **no colors** for clean, professional diagrams. Only highlight success/failure states when relevant:
51
+
52
+
```mermaid
53
+
flowchart LR
54
+
A[Input] --> B[Process]
55
+
B --> C[Output]
56
+
57
+
style C fill:#dcfce7,color:#166534
58
+
```
59
+
60
+
**When to use:**
61
+
- Simple linear workflows (3-5 steps)
62
+
- Clear structure that speaks for itself
63
+
- No need to categorize different types of nodes
64
+
65
+
#### Style 2: Categorical (For complex workflows)
66
+
67
+
Use consistent colors to categorize different types of nodes. **Always include `color:#000`** in every style declaration to ensure readable text in dark mode.
0 commit comments