From 5e17ad0f1885b06c37c95f9d4519108dcb895960 Mon Sep 17 00:00:00 2001 From: chrismetz09 Date: Fri, 29 Oct 2021 15:21:40 -0700 Subject: [PATCH] Add diagram guide --- .../en/docs/contribute/style/diagram-guide.md | 577 ++++++++++++++++++ .../docs/images/diagram-guide-example-3.svg | 1 + 2 files changed, 578 insertions(+) create mode 100644 content/en/docs/contribute/style/diagram-guide.md create mode 100644 content/en/docs/images/diagram-guide-example-3.svg diff --git a/content/en/docs/contribute/style/diagram-guide.md b/content/en/docs/contribute/style/diagram-guide.md new file mode 100644 index 0000000000..227217e1ea --- /dev/null +++ b/content/en/docs/contribute/style/diagram-guide.md @@ -0,0 +1,577 @@ +--- +title: Diagram Guide +linktitle: Diagram guide +content_type: concept +weight: 15 +--- + + + +This guide shows you how to create, edit and share diagrams using the Mermaid Javascript library. Mermaid.js allows you to generate diagrams using a simple markdown-like syntax inside Markdown files. You can also use Mermaid to generate `.svg` or `.png` image files that you can add to your documentation. + +The target audience for this guide is anybody wishing to learn about Mermaid and/or how to create and add diagrams to Kubernetes documentation. + +Figure 1 outlines the topics covered in this section. + +{{< mermaid >}} +flowchart LR +subgraph m[Mermaid.js] +direction TB +S[ ]-.- +C[build
diagrams
with markdown] --> +D[on-line
live editor] +end +A[Why are diagrams
useful?] --> m +m --> N[3 x methods
for creating
diagrams] +N --> T[Examples] +T --> X[Styling
and
captions] +X --> V[Tips] + + + classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000; + classDef spacewhite fill:#ffffff,stroke:#fff,stroke-width:0px,color:#000 + class A,C,D,N,X,m,T,V box + class S spacewhite +{{< /mermaid >}} + +

Figure 1. Topics covered in this section.


+ +All you need to begin working with Mermaid is the following: + +* Basic understanding of markdown. +* Using the Mermaid live editor. +* Using [Hugo shortcodes](/docs/contribute/style/hugo-shortcodes/). +* Performing [Hugo local previews](https://kubernetes.io/docs/contribute/new-content/open-a-pr/#preview-locally). +* Familiar with the [Contributing new content](/docs/contribute/new-content/) process. + +{{< note >}} +You can click the caption for each diagram in this section to view the code and rendered diagram in the Mermaid live editor. +{{< /note >}} + + + +## Why you should use diagrams in documentation + +Diagrams improve documentation clarity and comprehension. There are advantages for both the user and the contributor. + +The user benefits include: + +* __Friendly landing spot__. A detailed text-only greeting page could intimidate users, in particular, first-time Kubernetes users. +* __Faster grasp of concepts__. A diagram can help users understand the key points of a complex topic. Your diagram can serve as a visual learning guide to dive into the topic details. +* __Better retention__. For some, it is easier to recall pictures rather than text. + +The contributor benefits include: + +* __Assist in developing the structure and content__ of your contribution. For example, you can start with a simple diagram covering the high-level points and then dive into details. +* __Expand and grow the user community__. Easily consumed documentation augmented with diagrams attracts new users who might previously have been reluctant to engage due to perceived complexities. + +You should consider your target audience. In addition to experienced K8s users, you will have many who are new to Kubernetes. Even a simple diagram can assist new users in absorbing Kubernetes concepts. They become emboldened and more confident to further explore Kubernetes and the documentation. + + +## Mermaid + +[Mermaid](https://mermaid-js.github.io/mermaid/#/) is an open source JavaScript library that allows you to create, edit and easily share diagrams using a simple, markdown-like syntax configured inline in Markdown files. + +The following lists features of Mermaid: + +* Simple code syntax. +* Includes a web-based tool allowing you to code and preview your diagrams. +* Supports multiple formats including flowchart, state and sequence. +* Easy collaboration with colleagues by sharing a per-diagram URL. +* Broad selection of shapes, lines, themes and styling. + + +The following lists advantages of using Mermaid: + +* No need for separate, non-Mermaid diagram tools. +* Adheres to existing PR workflow. You can think of Mermaid code as just Markdown text included in your PR. +* Simple tool builds simple diagrams. You don't want to get bogged down (re)crafting an overly complex and detailed picture. Keep it simple! + +Mermaid provides a simple, open and transparent method for the SIG communities to add, edit and collaborate on diagrams for new or existing documentation. + +{{< note >}} +You can still use Mermaid even if it's not supported in your environment. This method is called __Mermaid+SVG__ and is explained below. +{{< /note >}} + +### Live editor + +The [Mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor) is a web-based tool that enables you to create, edit and review diagrams. + +The following lists live editor functions: + +* Displays Mermaid code and rendered diagram. +* Generates a URL for each saved diagram. The URL is displayed in the URL field of your browser. You can share the URL with colleagues who can access and modify the diagram. +* Option to download `.svg` or `.png` files. + + +{{< note >}} +The live editor is the easiest and fastest way to create and edit Mermaid diagrams. +{{< /note >}} + + +## Methods for creating diagrams + +Figure 2 outlines the three methods to generate and add diagrams. + +{{< mermaid >}} +graph TB +A[Contributor] +B[Inline

Mermaid code
added to .md file] +C[Mermaid+SVG

Add mermaid-generated
svg file to .md file] +D[External tool

Add external-tool-
generated svg file
to .md file] + + A --> B + A --> C + A --> D + + classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000; + class A,B,C,D box + +{{< /mermaid >}} + +

Figure 2. Methods to create diagrams.


+ +### Inline + +Figure 3 outlines the steps to follow for adding a diagram using the Inline method. + +{{< mermaid >}} +graph LR +A[1. Use live editor
to create/edit
diagram] --> +B[2. Store diagram
URL somewhere] --> +C[3. Copy Mermaid code
to page markdown file] --> +D[4. Add caption] + + + classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000; + class A,B,C,D box +{{< /mermaid >}} + +

Figure 3.Inline Method steps.


+ + +The following lists the steps you should follow for adding a diagram using the Inline method: + +1. Create your diagram using the live editor. +2. Store the diagram URL somewhere for later access. +3. Copy the mermaid code to the location in your `.md` file where you want the diagram to appear. +4. Add a caption using the `
` tag. + +A Hugo build runs the Mermaid code and turns it into a diagram. +{{< note >}} +You may find keeping track of diagram URLs is cumbersome. If so, make a note in the `.md` file that the Mermaid code is self-documenting. Contributors can copy the Mermaid code to and from the live editor for diagram edits. +{{< /note >}} + +Here is a sample code snippet contained in an `.md` file: + +``` +--- +title: My PR +--- +Figure 17 shows a simple A to B process. +some markdown text +... +{{}} + graph TB + A --> B +{{}} + +

Figure 17. A to B

+more text +``` +{{< note >}} +You must include the `{{}}`, `{{}}` shortcode tags at the start and end of the Mermaid code block. You should add a diagram caption using the `
` tag. +{{< /note >}} + +For more details on diagram captions, see the [How to use captions](#how-to-use-captions). + +The following lists advantages of the Inline method: + +* Live editor tool. +* Easy to copy Mermaid code to and from the live editor and your `.md` file. +* No need for separate `.svg` image file handling. +* Content text, diagram code and diagram caption contained in the same `.md` file. + +You should use the [local](https://kubernetes.io/docs/contribute/new-content/open-a-pr/#preview-locally) and Netlify previews to verify the diagram is properly rendered. + +{{< caution >}} +The Mermaid live editor feature set may not support the K8s/website Mermaid feature set. You might see a syntax error or a blank screen after the Hugo build. If that is the case, consider using the Mermaid+SVG method. +{{< /caution >}} + +### Mermaid+SVG + +Figure 4 outlines the steps to follow for adding a diagram using the Mermaid+SVG method. + +{{< mermaid >}} +flowchart LR +A[1. Use live editor
to create/edit
diagram] +B[2. Store diagram
URL somewhere] +C[3. Generate .svg file
and download to
images/ folder] +subgraph w[ ] +direction TB +D[4. Use figure shortcode
to reference .svg
file in page
.md file] --> +E[5. Add caption] +end +A --> B +B --> C +C --> w + + classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000; + class A,B,C,D,E,w box +{{< /mermaid >}} + +

Figure 4. Mermaid+SVG method steps.

+ +The following lists the steps you should follow for adding a diagram using the Mermaid+SVG method: + +1. Create your diagram using the live editor. +2. Store the diagram URL somewhere for later access. +3. Generate an `.svg` image file for the diagram and download it to the appropriate `images/` folder. +4. Use the `{{}}` shortcode to reference the diagram in the `.md` file. +5. Add a caption using the `
` tag. + +For example, use the live editor to create a diagram called `boxnet`. Store the diagram URL somewhere for later access. Generate and download a `boxnet.svg` file to the appropriate `../images/` folder. + +Reference the `.svg` image file in the PR `.md` file using the `{{}}` shortcode. +```json +{{}} +``` + +Add a caption to the diagram using the `
` tag: + +```text +

Figure 15. A Boxnet diagram


+``` + +For more details on diagram captions, see [How to use captions](#how-to-use-captions). + +{{< note >}} +The `{{}}` shortcode is the preferred method for adding `.svg` image files to your documentation. You can also use the standard markdown image syntax like so: `![my boxnet diagram](static/images/boxnet.svg)`. +{{< /note >}} + +You should add the live editor URL as a comment block in the `.svg` image file using a text editor. For example, you would include the following at the beginning of the `.svg` image file: + +``` + + +``` + +The following lists advantages of the Mermaid+SVG method: + +* Live editor tool. +* Live editor tool supports the most current Mermaid feature set. +* Employ existing K8s/website methods for handling `.svg` image files. +* Environment doesn't require Mermaid support. + +Be sure to check the diagram renders properly using the [local](https://kubernetes.io/docs/contribute/new-content/open-a-pr/#preview-locally) and Netlify previews. + +### External tool + +Figure 5 outlines the steps to follow for adding a diagram using the External Tool method. + +In essence, you use your external tool to create the diagram and save it as an `.svg` or `.png` image file. After that, use the same steps as the __Mermaid+SVG__ method for adding `.svg` image files. + +{{< mermaid >}} +flowchart LR +A[1. Use external
tool to create/edit
diagram] +B[2. If possible, save
diagram coordinates
for contributor
access] +C[3. Generate .svg
or.png file
and download to
appropriate
images/ folder] +subgraph w[ ] +direction TB +D[4. Use figure shortcode
to reference svg or
png file in
page .md file] --> +E[5. Add caption] +end +A --> B +B --> C +C --> w +classDef box fill:#fff,stroke:#000,stroke-width:1px,color:#000; +class A,B,C,D,E,w box + +{{< /mermaid >}} + +

Figure 5. External Tool method steps.


+ +The following lists the steps you should follow for adding a diagram using the External Tool method: + +1. Use your external tool to create a diagram. +2. Save the diagram coordinates for contributor access. For example, your tool may offer a link to the diagram image, or you could place the source code file, such as an `.xml` file, in a public repository for later contributor access. +3. Generate and save the diagram as an `.svg` or `.png` image file. Download this file to the appropriate `../images/` folder. +4. Use the `{{}}` shortcode to reference the diagram in the `.md` file. +5. Add a caption using the `
` tag. + +Here is the `{{}}` shortcode and `
` tags for the `images/apple.svg` diagram: +```text +{{}} // our figure +

Figure 9. A Red Apple


// our figure caption +``` + +If your external drawing tool permits: + +* You can incorporate multiple `.svg` or `.png` logos, icons and images into your diagram. However, make sure you observe copyright and follow the Kubernetes documentation + [guidelines](/docs/contribute/style/content-guide/) on the use of third party content. +* You should save the diagram source coordinates for later contributor access. For example, your tool may offer a link to the diagram image, or you could place the source code file, such as an `.xml` file, somewhere for contributor access. + +For more information on K8s and CNCF logos and images, check out [CNCF Artwork](https://github.com/cncf/artwork). + +The following lists advantages of the External Tool method: + +* Contributor familiarity with external tool. +* Diagrams require more detail than what Mermaid can offer. + +Don't forget to check the rendered diagram using the [local](https://kubernetes.io/docs/contribute/new-content/open-a-pr/#preview-locally) and Netlify previews. + +## Examples + +This section shows several examples of Mermaid diagrams. + +{{< note >}} +The code block examples omit the Hugo `{{}}`, `{{}}` shortcode tags. This allows you to copy the code block into the live editor to experiment on your own. Note that the live editor doesn't recognize Hugo shortcodes. +{{< /note >}} + +### Example 1 - Pod topology spread constraints + +Figure 6 shows the diagram appearing in the [Pod Topology Spread Constraints](https://kubernetes.io/docs/concepts/workloads/pods/pod-topology-spread-constraints/#node-labels) page. + +{{< mermaid >}} + graph TB + subgraph "zoneB" + n3(Node3) + n4(Node4) + end + subgraph "zoneA" + n1(Node1) + n2(Node2) + end + + classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000; + classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff; + classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5; + class n1,n2,n3,n4 k8s; + class zoneA,zoneB cluster; +{{< /mermaid >}} + +

Figure 6. Pod Topology Spread Constraints.


+ +Code block: +``` +graph TB + subgraph "zoneB" + n3(Node3) + n4(Node4) + end + subgraph "zoneA" + n1(Node1) + n2(Node2) + end + + classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000; + classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff; + classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5; + class n1,n2,n3,n4 k8s; + class zoneA,zoneB cluster; +``` + +### Example 2 - Ingress + +Figure 7 shows the diagram appearing in the [What is Ingress](https://kubernetes.io/docs/concepts/services-networking/ingress/#what-is-ingress) page. + +{{< mermaid >}} +graph LR; +client([client])-. Ingress-managed
load balancer .->ingress[Ingress]; +ingress-->|routing rule|service[Service]; +subgraph cluster +ingress; +service-->pod1[Pod]; +service-->pod2[Pod]; +end +classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000; +classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff; +classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5; +class ingress,service,pod1,pod2 k8s; +class client plain; +class cluster cluster; +{{< /mermaid >}} + +

Figure 7. Ingress.


+ +Code block: + +```mermaid +graph LR; + client([client])-. Ingress-managed
load balancer .->ingress[Ingress]; + ingress-->|routing rule|service[Service]; + subgraph cluster + ingress; + service-->pod1[Pod]; + service-->pod2[Pod]; + end + classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000; + classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff; + classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5; + class ingress,service,pod1,pod2 k8s; + class client plain; + class cluster cluster; +``` + +### Example 3 - K8s system flow + +Figure 8 depicts a Mermaid sequence diagram showing the system flow between K8s components to start a container. + +{{< figure src="/docs/images/diagram-guide-example-3.svg" alt="K8s system flow diagram" class="diagram-large" >}} + +

Figure 8. K8s System Flow.


+ + +Code block: +``` +%%{init:{"theme":"neutral"}}%% +sequenceDiagram + actor me + participant apiSrv as control plane

api-server + participant etcd as control plane

etcd datastore + participant cntrlMgr as control plane

controller
manager + participant sched as control plane

scheduler + participant kubelet as node

kubelet + participant container as node

container
runtime + me->>apiSrv: 1. kubectl create -f pod.yaml + apiSrv-->>etcd: 2. save new state + cntrlMgr->>apiSrv: 3. check for changes + sched->>apiSrv: 4. watch for unassigned pods(s) + apiSrv->>sched: 5. notify about pod w nodename=" " + sched->>apiSrv: 6. assign pod to node + apiSrv-->>etcd: 7. save new state + kubelet->>apiSrv: 8. look for newly assigned pod(s) + apiSrv->>kubelet: 9. bind pod to node + kubelet->>container: 10. start container + kubelet->>apiSrv: 11. update pod status + apiSrv-->>etcd: 12. save new state +``` + +## How to style diagrams + +You can style one or more diagram elements using well-known CSS nomenclature. You accomplish this using two types of statements in the Mermaid code. + +* `classDef` defines a class of style attributes. +* `class` defines one or more elements to apply the class to. + +In the code for [figure 7](https://mermaid-js.github.io/mermaid-live-editor/edit/#eyJjb2RlIjoiZ3JhcGggIExSXG4gIGNsaWVudChbY2xpZW50XSktLiBJbmdyZXNzLW1hbmFnZWQgPGJyPiBsb2FkIGJhbGFuY2VyIC4tPmluZ3Jlc3NbSW5ncmVzc107XG4gIGluZ3Jlc3MtLT58cm91dGluZyBydWxlfHNlcnZpY2VbU2VydmljZV07XG4gIHN1YmdyYXBoIGNsdXN0ZXJcbiAgaW5ncmVzcztcbiAgc2VydmljZS0tPnBvZDFbUG9kXTtcbiAgc2VydmljZS0tPnBvZDJbUG9kXTtcbiAgZW5kXG4gIGNsYXNzRGVmIHBsYWluIGZpbGw6I2RkZCxzdHJva2U6I2ZmZixzdHJva2Utd2lkdGg6NHB4LGNvbG9yOiMwMDA7XG4gIGNsYXNzRGVmIGs4cyBmaWxsOiMzMjZjZTUsc3Ryb2tlOiNmZmYsc3Ryb2tlLXdpZHRoOjRweCxjb2xvcjojZmZmO1xuICBjbGFzc0RlZiBjbHVzdGVyIGZpbGw6I2ZmZixzdHJva2U6I2JiYixzdHJva2Utd2lkdGg6MnB4LGNvbG9yOiMzMjZjZTU7XG4gIGNsYXNzIGluZ3Jlc3Msc2VydmljZSxwb2QxLHBvZDIgazhzO1xuICBjbGFzcyBjbGllbnQgcGxhaW47XG4gIGNsYXNzIGNsdXN0ZXIgY2x1c3RlcjtcbiIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6dHJ1ZX0), you can see examples of both. +``` +classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff; // defines style for the k8s class +class ingress,service,pod1,pod2 k8s; // k8s class is applied to elements ingress, service, pod1 and pod2. +``` +You can include one or multiple `classDef` and `class` statements in your diagram. You can also use the official K8s `#326ce5` hex color code for K8s components in your diagram. + +For more information on styling and classes, see [Mermaid Styling and classes docs](https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes). + +## How to use captions + +A caption is a brief description of a diagram. A title or a short description of the diagram are examples of captions. Captions aren't meant to replace explanatory text you have in your documentation. Rather, they serve as a "context link" between that text and your diagram. + +The combination of some text and a diagram tied together with a caption provide a concise representation of the information you wish to convey to the user. + +Without captions, you are asking the user to scan the text above or below the diagram to figure out a meaning. This can be frustrating for the user. + +{{< note >}} +You should always add a caption to each diagram in your documentation. +{{< /note >}} + +Proper captioning involves three components: diagram, diagram caption and the diagram referral. As an example, consider a diagram `.svg` image file saved to `/images/docs/components-of-kubernetes.svg`. + +**Diagram** + +Here is the `{{}}` shortcode for the diagram. +```text +{{}} +``` +You should only pass the `src`, `alt` and `class` values into the `{{}}` shortcode. You can adjust the size of the diagram using `diagram-large`, `diagram-medium` and `diagram-small` classes. You can't style the `caption` value in this shortcode, and it only supports diagram image files. + +{{< note >}} +Diagrams created using the `Inline` method don't use the `{{}}` shortcode. +{{< /note >}} + +**Diagram Caption** + +Next, add a diagram caption. You must use the following format: +```text +

Figure #. CAPTION TEXT


+``` +Here are several items to consider when adding diagram captions. + +* Use`
` tags to add a diagram caption for `Inline`, `Mermaid+SVG` and `External Tool` diagrams. +* Wrap caption text inside `

` tags using `style="padding-left: 310px; font-weight: bold"`. This provides a consistent style for the caption text. +* Prepend your diagram caption with `Figure NUMBER.`. You must use `Figure` and the number must be unique for each diagram in your documentation page. +* Add your diagram caption text after the `Figure NUMBER.` on the same line. Keep it short. +* Position your diagram caption __BELOW__ your diagram. +* You can hyperlink your caption using `` tags. + +Caption for the `/images/docs/components-of-kubernetes.svg` diagram. +```text +

Figure 4. Kubernetes Architecture.


+``` +Hyperlinked caption for the same diagram. +```text +

Figure 4. Kubernetes Architecture Test.


+``` + +Check out the source code for this page, `diagram-guide.md`, for more examples of diagram captions. + +**Diagram Referral** + +Finally, you can add a diagram caption referral. This is used inside your text. It allows a user to connect your text with the diagram. The `Figure NUMBER` in your referral and caption must match. + +Here is an example of a caption referral included in your content text: +```text +Figure 9 depicts the components of the Kubernetes architecture. The control plane ... +``` +Diagram referrals are optional and there are cases where they might not be suitable. If you are not sure, add a diagram referral to your text to see if it sounds okay. When in doubt, use a diagram referral. + +**Complete picture** + +Figure 9 shows the Kubernetes Architecture diagram that includes the diagram, diagram caption and diagram caption referral. The `{{}}` shortcode renders the diagram. The `
` defines the caption. The caption referral is contained in this paragraph. + +Here are the `{{}}` shortcode and `
` statements for this diagram: +``` +{{}} +

Figure x. Kubernetes Architecture Test.


+``` + +{{< figure src="/images/docs/components-of-kubernetes.svg" alt="Kubernetes pod running inside a cluster" class="diagram-large" >}} +

Figure 9. Kubernetes Architecture.


+ +## Tips + +* Always use the live editor to create/edit your diagram. + +* Always use Hugo local and Netlify previews to check out how the diagram appears in the documentation. + +* Include diagram source pointers such as a URL, source code location, or indicate the code is self-documenting. + +* Use diagram captions. + +* Very helpful to include the diagram `.svg` or `.png` image and/or Mermaid source code in issues and PRs. + +* With the `Mermaid+SVG` and `External Tool` methods, use `.svg` image files because they stay sharp when you zoom in on the diagram. + +* Best practice for `.svg` files is to load it into an SVG editing tool and use the + “Convert text to paths” function. This ensures that the diagram renders the same on all systems, regardless of font availability and font rendering support. + +* No Mermaid support for additional icons or artwork. + +* Hugo Mermaid shortcodes don't work in the live editor. + +* Any time you modify a diagram in the live editor, you __must save__ it to generate a new URL for the diagram. + +* Click on live editor links in this section to look over more examples. + +* Look over the source code of this page, `diagram-guide.md`, for more examples. + +* Check out the [Mermaid docs](https://mermaid-js.github.io/mermaid/#/) for explanations and examples. + +Most important, __Keep Diagrams Simple__. This will save time for you and fellow contributors, and allow for easier reading by new and experienced users. + + + + + + + diff --git a/content/en/docs/images/diagram-guide-example-3.svg b/content/en/docs/images/diagram-guide-example-3.svg new file mode 100644 index 0000000000..85fef13910 --- /dev/null +++ b/content/en/docs/images/diagram-guide-example-3.svg @@ -0,0 +1 @@ +mecontrol planeapi-servercontrol planeetcd datastorecontrol planecontrollermanagercontrol planeschedulernodekubeletnodecontainerruntime1. kubectl create -f pod.yaml2. save new state3. check for changes4. watch for unassigned pods(s)5. notify about pod w nodename=" "6. assign pod to node7. save new state8. look for newly assigned pod(s)9. bind pod to node10. start container11. update pod status12. save new statemecontrol planeapi-servercontrol planeetcd datastorecontrol planecontrollermanagercontrol planeschedulernodekubeletnodecontainerruntime \ No newline at end of file