Skip to content

docs: fix residual legend entries and Qdrant diagram accuracy #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
weicao merged 1 commit into from
Apr 9, 2026
Merged

docs: fix residual legend entries and Qdrant diagram accuracy #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/components/ClickhouseArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,6 @@ export default function ClickhouseArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Client Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Replica Pod (all equivalent)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/ElasticsearchArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,8 +317,6 @@ export default function ElasticsearchArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Master / REST Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Data Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>ES Cluster Coordination</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/EtcdArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,6 @@ export default function EtcdArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Leader / Client Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Follower Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/KafkaArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,8 +289,6 @@ export default function KafkaArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#c084fc'}}></span>Controller Pod (KRaft)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Broker Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/KafkaCombinedArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ export default function KafkaCombinedArchitectureDiagram() {
</div>{/* /main-area */}

<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Client Traffic (:9092)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#c084fc'}}></span>KRaft Controller Quorum (:9093)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Internal Replication (:9094)</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/MilvusArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,6 @@ export default function MilvusArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>Coordinator Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Proxy / Entry Point</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Worker Pod</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/MilvusStandaloneArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,6 @@ export default function MilvusStandaloneArchitectureDiagram() {
</div>{/* /main-area */}

<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>Milvus (all-in-one)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Storage Components (etcd / MinIO)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/MinioArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,6 @@ export default function MinioArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>S3 API Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Distributed Node (symmetric)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/MongodbArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,6 @@ export default function MongodbArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Primary / RW Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Secondary / RO Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Replica Set DCS</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/MongodbShardingArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,6 @@ export default function MongodbShardingArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>Mongos (query router)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Config Server (CSRS)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Shard Primary</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/MysqlArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,8 +305,6 @@ export default function MysqlArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Primary / RW Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Replica Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
29 changes: 14 additions & 15 deletions src/components/QdrantArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,14 +94,12 @@ export default function QdrantArchitectureDiagram() {
padding: 9px 12px; display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid #21262d;
}
.qdrant-ha-diagram .pod-leader .pod-header { background: linear-gradient(135deg,#0d2510,#1a3820); border-bottom-color: #238636; }
.qdrant-ha-diagram .pod-replica .pod-header { background: linear-gradient(135deg,#0d1f38,#162840); border-bottom-color: #1f6feb; }
.qdrant-ha-diagram .pod-name { font-size: 11px; font-weight: 700; color: #f0f6fc; }
.qdrant-ha-diagram .pod-badge {
font-size: 9px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
}
.qdrant-ha-diagram .badge-leader { background: #1a4a1a; color: #3fb950; border: 1px solid #238636; }
.qdrant-ha-diagram .badge-replica { background: #0d2035; color: #79c0ff; border: 1px solid #1f6feb; }
.qdrant-ha-diagram .containers { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.qdrant-ha-diagram .container-row {
Expand Down Expand Up @@ -191,16 +189,20 @@ export default function QdrantArchitectureDiagram() {
{/* Pods */}
<div className="pods-section">
<div className="section-label">Pods · Worker Nodes</div>
<div style={{ fontSize: '9px', color: '#7d8590', marginBottom: '10px', lineHeight: 1.65 }}>
<strong style={{ color: '#8b949e' }}>Per-shard Raft, not one cluster leader.</strong> Each collection shard elects its own
replica leader; a node may host many shards. Badges mark symmetric peers (illustrative pod names only).
</div>
<div className="pods-grid">

{/* qdrant-0 LEADER */}
<div className="pod-card pod-leader">
{/* qdrant-0 */}
<div className="pod-card pod-replica">
<div className="pod-header">
<span className="pod-name">qdrant-0</span>
<span className="pod-badge badge-leader">LEADER</span>
<span className="pod-badge badge-replica">PEER</span>
</div>
<div className="containers">
<div className="container-row" style={{borderColor:'#23863644',background:'#081208'}}>
<div className="container-row" style={{borderColor:'#1f6feb44',background:'#080d18'}}>
<span className="container-icon">🎯</span>
<div className="container-info">
<div className="container-name">qdrant</div>
Expand All @@ -211,11 +213,11 @@ export default function QdrantArchitectureDiagram() {
<div className="pvc-row">💾 PVC <strong style={{color:'#e3b341'}}>data-0</strong> · 20Gi</div>
</div>

{/* qdrant-1 REPLICA */}
{/* qdrant-1 */}
<div className="pod-card pod-replica">
<div className="pod-header">
<span className="pod-name">qdrant-1</span>
<span className="pod-badge badge-replica">REPLICA</span>
<span className="pod-badge badge-replica">PEER</span>
</div>
<div className="containers">
<div className="container-row" style={{borderColor:'#1f6feb44',background:'#080d18'}}>
Expand All @@ -229,11 +231,11 @@ export default function QdrantArchitectureDiagram() {
<div className="pvc-row">💾 PVC <strong style={{color:'#e3b341'}}>data-1</strong> · 20Gi</div>
</div>

{/* qdrant-2 REPLICA */}
{/* qdrant-2 */}
<div className="pod-card pod-replica">
<div className="pod-header">
<span className="pod-name">qdrant-2</span>
<span className="pod-badge badge-replica">REPLICA</span>
<span className="pod-badge badge-replica">PEER</span>
</div>
<div className="containers">
<div className="container-row" style={{borderColor:'#1f6feb44',background:'#080d18'}}>
Expand Down Expand Up @@ -265,11 +267,8 @@ export default function QdrantArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Leader / RW Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Replica Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Raft Consensus</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Peer node</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Raft (per shard)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
</div>

Expand Down
2 changes: 0 additions & 2 deletions src/components/RabbitmqArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,8 +283,6 @@ export default function RabbitmqArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>AMQP Traffic / Client Service</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Peer Node</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
8 changes: 3 additions & 5 deletions src/components/RedisArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,17 +299,17 @@ export default function RedisArchitectureDiagram() {
<div className="sentinel-pod">
<div className="sentinel-pod-name">sentinel-0</div>
:26379 sentinel · monitors master<br/>
<span style={{color:'#484f58'}}>emptyDir · conf rebuilt on restart</span>
<span style={{color:'#484f58'}}>PVC <strong style={{color:'#e3b341'}}>data</strong> · Sentinel state (volume <code style={{fontSize:'9px'}}>needSnapshot: true</code>)</span>
</div>
<div className="sentinel-pod">
<div className="sentinel-pod-name">sentinel-1</div>
:26379 sentinel · monitors master<br/>
<span style={{color:'#484f58'}}>emptyDir · conf rebuilt on restart</span>
<span style={{color:'#484f58'}}>PVC <strong style={{color:'#e3b341'}}>data</strong> · Sentinel state (volume <code style={{fontSize:'9px'}}>needSnapshot: true</code>)</span>
</div>
<div className="sentinel-pod">
<div className="sentinel-pod-name">sentinel-2</div>
:26379 sentinel · monitors master<br/>
<span style={{color:'#484f58'}}>emptyDir · conf rebuilt on restart</span>
<span style={{color:'#484f58'}}>PVC <strong style={{color:'#e3b341'}}>data</strong> · Sentinel state (volume <code style={{fontSize:'9px'}}>needSnapshot: true</code>)</span>
</div>
</div>

Expand All @@ -320,8 +320,6 @@ export default function RedisArchitectureDiagram() {
</div>{/* /main-area */}
{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Primary / RW Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Replica Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/RedisClusterArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,8 +334,6 @@ export default function RedisClusterArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#f0883e'}}></span>Shard Primary</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#8b949e'}}></span>Shard Replica</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#56d4dd'}}></span>Gossip / Cluster Bus</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/RedisStandaloneArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,6 @@ export default function RedisStandaloneArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>RW Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/RocketmqArchitectureDiagram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,8 +394,6 @@ export default function RocketmqArchitectureDiagram() {

{/* Legend */}
<div className="legend">
<div className="legend-item"><span className="legend-dot" style={{background:'#388bfd'}}></span>KubeBlocks Operator (control plane)</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#a371f7'}}></span>CRD Resource</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#3fb950'}}></span>Master Broker / Write Traffic</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#79c0ff'}}></span>Slave Pod</div>
<div className="legend-item"><span className="legend-dot" style={{background:'#e3b341'}}></span>Persistent Storage</div>
Expand Down
Loading
Loading