Skip to content

Commit bd28ee4

Browse files
burtenshawburtenshaw
committed
use inline and table style for protocol diagram
1 parent ccf0071 commit bd28ee4

File tree

1 file changed

+63
-114
lines changed

1 file changed

+63
-114
lines changed

‎units/en/unit1/communication-protocol.mdx‎

Lines changed: 63 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -129,143 +129,92 @@ In the previous section, we discussed the lifecycle of a single interaction betw
129129

130130
The MCP protocol defines a structured interaction lifecycle between Clients and Servers:
131131

132-
<style>
133-
.diagram {
134-
margin: 20px 0;
135-
font-family: monospace;
136-
}
137-
.client {
138-
background-color: lightgreen;
139-
}
140-
.server {
141-
background-color: lightblue;
142-
}
143-
.client, .server {
144-
display: inline-block;
145-
width: 50px;
146-
text-align: center;
147-
padding: 10px;
148-
border: 1px solid #ccc;
149-
border-radius: 4px;
150-
margin: 0px;
151-
}
152-
.arrow {
153-
display: inline-block;
154-
width: 100px;
155-
text-align: center;
156-
color: #666;
157-
position: relative;
158-
}
159-
.arrow::before {
160-
content: "→";
161-
position: absolute;
162-
bottom: -15px;
163-
left: 50%;
164-
transform: translateX(-50%);
165-
}
166-
.arrow.reverse::before {
167-
content: "←";
168-
}
169-
.message {
170-
display: block;
171-
margin: 5px 0 20px 0;
172-
color: #333;
173-
}
174-
</style>
175-
176132
### Initialization
177133

178134
The Client connects to the Server and they exchange protocol versions and capabilities, and the Server responds with its supported protocol version and capabilities.
179135

180-
<div class="diagram">
181-
<div class="client">💻</div>
182-
<div class="arrow">
183-
<span class="message">initialize</span>
184-
</div>
185-
<div class="server">🌐</div>
186-
<br>
187-
<div class="client">💻</div>
188-
<div class="arrow reverse">
189-
<span class="message">response</span>
190-
</div>
191-
<div class="server">🌐</div>
192-
<br>
193-
<div class="client">💻</div>
194-
<div class="arrow">
195-
<span class="message">initialized</span>
196-
</div>
197-
<div class="server">🌐</div>
198-
</div>
136+
<table style="width: 100%;">
137+
<tr>
138+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
139+
<td style="text-align: center;">→<br>initialize</td>
140+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
141+
</tr>
142+
<tr>
143+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
144+
<td style="text-align: center;">←<br>response</td>
145+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
146+
</tr>
147+
<tr>
148+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
149+
<td style="text-align: center;">→<br>initialized</td>
150+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
151+
</tr>
152+
</table>
199153

200154
The Client confirms the initialization is complete via a notification message.
201155

202156
### Discovery
203157

204158
The Client requests information about available capabilities and the Server responds with a list of available tools.
205159

206-
<div class="diagram">
207-
<div class="client">💻</div>
208-
<div class="arrow">
209-
<span class="message">tools/list</span>
210-
</div>
211-
<div class="server">🌐</div>
212-
<br>
213-
<div class="client">💻</div>
214-
<div class="arrow reverse">
215-
<span class="message">response</span>
216-
</div>
217-
<div class="server">🌐</div>
218-
</div>
160+
<table style="width: 100%;">
161+
<tr>
162+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
163+
<td style="text-align: center;">→<br>tools/list</td>
164+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
165+
</tr>
166+
<tr>
167+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
168+
<td style="text-align: center;">←<br>response</td>
169+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
170+
</tr>
171+
</table>
219172

220173
This process could be repeated for each tool, resource, or prompt type.
221174

222175
### Execution
223176

224177
The Client invokes capabilities based on the Host's needs.
225178

226-
<div class="diagram">
227-
<div class="client">💻</div>
228-
<div class="arrow">
229-
<span class="message">tools/call</span>
230-
</div>
231-
<div class="server">🌐</div>
232-
<br>
233-
<div class="client">💻</div>
234-
<div class="arrow reverse">
235-
<span class="message">notification (optional progress)</span>
236-
</div>
237-
<div class="server">🌐</div>
238-
<br>
239-
<div class="client">💻</div>
240-
<div class="arrow reverse">
241-
<span class="message">response</span>
242-
</div>
243-
<div class="server">🌐</div>
244-
</div>
179+
<table style="width: 100%;">
180+
<tr>
181+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
182+
<td style="text-align: center;">→<br>tools/call</td>
183+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
184+
</tr>
185+
<tr>
186+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
187+
<td style="text-align: center;">←<br>notification (optional progress)</td>
188+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
189+
</tr>
190+
<tr>
191+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
192+
<td style="text-align: center;">←<br>response</td>
193+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
194+
</tr>
195+
</table>
245196

246197
### Termination
247198

248199
The connection is gracefully closed when no longer needed and the Server acknowledges the shutdown request.
249200

250-
<div class="diagram">
251-
<div class="client">💻</div>
252-
<div class="arrow">
253-
<span class="message">shutdown</span>
254-
</div>
255-
<div class="server">🌐</div>
256-
<br>
257-
<div class="client">💻</div>
258-
<div class="arrow reverse">
259-
<span class="message">response</span>
260-
</div>
261-
<div class="server">🌐</div>
262-
<br>
263-
<div class="client">💻</div>
264-
<div class="arrow">
265-
<span class="message">exit</span>
266-
</div>
267-
<div class="server">🌐</div>
268-
</div>
201+
<table style="width: 100%;">
202+
<tr>
203+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
204+
<td style="text-align: center;">→<br>shutdown</td>
205+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
206+
</tr>
207+
<tr>
208+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
209+
<td style="text-align: center;">←<br>response</td>
210+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
211+
</tr>
212+
<tr>
213+
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
214+
<td style="text-align: center;">→<br>exit</td>
215+
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
216+
</tr>
217+
</table>
269218

270219
The Client sends the final exit message to complete the termination.
271220

0 commit comments

Comments
 (0)