Custom Chart Components for Splunk Classic: XML Snippet Collection

Splunk Classic dashboards allow deep customization through XML, CSS, and SVG.
This article provides a curated set of reusable XML snippets that help you build original visualization components—from simple shapes to fully annotated network diagrams.

2. Default Template

`00_default_single_panel.xml`

A clean, minimal starting point for anyone creating a custom visualization.
Use this template when you want to begin from scratch without any predefined styling or layout.

3. Shape Demo

`shapes_variations_demo.xml`

A comprehensive demonstration of all drawable shapes using CSS and SVG.
This file includes examples such as:

Circles, rectangles, polygons
Icons built from SVG paths
Filled, outlined, and gradient variations

Perfect for learning how to construct visual elements directly inside Splunk dashboards.

4. Line Demo

`line_variations_demo.xml`

A complete set of line styles you can use in custom charts, including:

Solid and dashed lines
Arrowheads
Curved paths (quadratic and cubic Bézier)
Multi‑segment connectors

Useful when designing diagrams, flows, or network topologies.

5. Final Complete Version

`complete_network_diagram.xml`

The fully polished version of the custom chart, complete with:

Detailed inline comments
Layered shapes and connectors
Reusable CSS classes
A realistic network diagram layout

This file serves as the “answer key” for anyone wanting to understand how all components fit together.

もちろん、日本語に自然に翻訳してまとめ直したよ。Qiita記事としてそのまま投稿できる読みやすい文体にしてある。

Splunk Classic向けカスタムチャート部品：XMLスニペット集

Splunk Classic のダッシュボードは、XML・CSS・SVG を組み合わせることで高度なカスタマイズが可能です。
この記事では、シンプルな図形から本格的なネットワーク図まで、独自のビジュアライゼーションを構築するための再利用可能な XML スニペットをまとめて紹介します。

2. デフォルトテンプレート

`00_default_single_panel.xml`

カスタム可視化を作り始める人のための、最小構成のスターターテンプレートです。
余計なレイアウトやスタイルが一切入っていないため、ゼロから自由に組み立てたい場合に最適です。

3. 図形デモ

`shapes_variations_demo.xml`

CSS と SVG を使って描画できる図形パターンを網羅したデモファイルです。
含まれる例は以下の通りです：

円、四角形、多角形
SVG パスで構成したアイコン
塗りつぶし、アウトライン、グラデーションなどのバリエーション

Splunk ダッシュボード内で図形を構築する方法を学ぶのに最適です。

4. 線デモ

`line_variations_demo.xml`

カスタムチャートで利用できる線のスタイルを一通りまとめたデモです：

実線・点線
矢印付きライン
曲線（2種類のベジェ曲線）
複数セグメントのコネクタ

フロー図やネットワーク構成図などを作る際に役立ちます。

5. 完成版

`complete_network_diagram.xml`

以下をすべて含んだ、完成度の高い最終版です：

詳細なインラインコメント
図形とコネクタのレイヤー構造
再利用可能な CSS クラス
実用的なネットワーク図レイアウト

各要素がどのように組み合わさっているかを理解するための「答え合わせ用ファイル」として使えます。

00_default_single_panel.xml

デフォルト：縦1個パネル（編集用テンプレート）で背景が黒色になるもの

<dashboard version="1.1">
  <label>デフォルト：縦1個パネル（編集用テンプレート）</label>
  <description>ここから自由に編集してください</description>
  <row>
    <panel>
      <html>
        <style>
          .canvas {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          /* ここにスタイルを追加 */
        </style>
        
        <div class="canvas">
          <!-- ここにコンテンツを追加 -->
        </div>
      </html>
    </panel>
  </row>
</dashboard>

shapes_variations_demo.xml

CSS/SVGで描ける全図形パターンの実例

図形バリエーションデモ CSS図形ギャラリー※ボタン風パーツのサンプルデザインを色々用意

<dashboard version="1.1">
  <label>図形バリエーション デモ</label>
  <description>CSS/SVGで描ける全図形パターン</description>
  
  <row>
    <panel>
      <title>CSS図形ギャラリー</title>
      <html>
        <style>
          .shape-gallery {
            width: 100%;
            height: 400px;
            background: #000;
            position: relative;
            padding: 20px;
          }
          
          .shape-base {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: monospace;
            font-weight: bold;
            font-size: 10px;
            color: #0ff;
            border: 2px solid #0ff;
            background: rgba(0, 20, 20, 0.8);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
          }
          
          /* 四角形 */
          .square {
            width: 80px;
            height: 80px;
            top: 20px;
            left: 20px;
          }
          
          /* 角丸四角形 */
          .rounded {
            width: 80px;
            height: 80px;
            border-radius: 15px;
            top: 20px;
            left: 130px;
          }
          
          /* 円形 */
          .circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            top: 20px;
            left: 240px;
          }
          
          /* ひし形 */
          .diamond {
            width: 80px;
            height: 80px;
            top: 20px;
            left: 350px;
            transform: rotate(45deg);
          }
          
          .diamond span {
            transform: rotate(-45deg);
          }
          
          /* 長方形 */
          .rectangle {
            width: 120px;
            height: 60px;
            top: 20px;
            left: 470px;
          }
          
          /* 楕円 */
          .ellipse {
            width: 120px;
            height: 60px;
            border-radius: 50%;
            top: 20px;
            left: 620px;
          }
          
          /* カプセル */
          .capsule {
            width: 120px;
            height: 60px;
            border-radius: 30px;
            top: 120px;
            left: 20px;
          }
          
          /* 台形風 */
          .trapezoid {
            width: 80px;
            height: 60px;
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
            top: 120px;
            left: 170px;
          }
          
          /* 三角形風（clip-path使用） */
          .triangle {
            width: 80px;
            height: 80px;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            top: 120px;
            left: 280px;
          }
          
          /* 五角形風 */
          .pentagon {
            width: 80px;
            height: 80px;
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            top: 120px;
            left: 390px;
          }
          
          /* 六角形風 */
          .hexagon {
            width: 80px;
            height: 80px;
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            top: 120px;
            left: 500px;
          }
          
          /* 星形 */
          .star {
            width: 80px;
            height: 80px;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            top: 120px;
            left: 610px;
          }
        </style>
        
        <div class="shape-gallery">
          <div class="shape-base square">SQUARE</div>
          <div class="shape-base rounded">ROUNDED</div>
          <div class="shape-base circle">CIRCLE</div>
          <div class="shape-base diamond"><span>DIAMOND</span></div>
          <div class="shape-base rectangle">RECTANGLE</div>
          <div class="shape-base ellipse">ELLIPSE</div>
          <div class="shape-base capsule">CAPSULE</div>
          <div class="shape-base trapezoid">TRAPEZ</div>
          <div class="shape-base triangle">TRI</div>
          <div class="shape-base pentagon">PENTA</div>
          <div class="shape-base hexagon">HEXA</div>
          <div class="shape-base star">STAR</div>
        </div>
      </html>
    </panel>
  </row>
  
  <row>
    <panel>
      <title>SVG図形ギャラリー</title>
      <html>
        <style>
          .svg-gallery {
            width: 100%;
            height: 300px;
            background: #000;
            position: relative;
          }
          
          .svg-gallery svg {
            width: 100%;
            height: 100%;
          }
          
          .svg-shape {
            fill: rgba(0, 20, 20, 0.8);
            stroke: #0ff;
            stroke-width: 2;
          }
          
          .svg-text {
            fill: #0ff;
            font-family: monospace;
            font-size: 12px;
            font-weight: bold;
            text-anchor: middle;
          }
        </style>
        
        <div class="svg-gallery">
          <svg>
            <!-- 長方形 -->
            <rect class="svg-shape" x="20" y="50" width="80" height="60"/>
            <text class="svg-text" x="60" y="85">RECT</text>
            
            <!-- 角丸長方形 -->
            <rect class="svg-shape" x="130" y="50" width="80" height="60" rx="10"/>
            <text class="svg-text" x="170" y="85">ROUNDED</text>
            
            <!-- 円 -->
            <circle class="svg-shape" cx="280" cy="80" r="40"/>
            <text class="svg-text" x="280" y="85">CIRCLE</text>
            
            <!-- 楕円 -->
            <ellipse class="svg-shape" cx="390" cy="80" rx="50" ry="30"/>
            <text class="svg-text" x="390" y="85">ELLIPSE</text>
            
            <!-- 三角形（polygon） -->
            <polygon class="svg-shape" points="530,50 490,110 570,110"/>
            <text class="svg-text" x="530" y="90">TRI</text>
            
            <!-- 五角形 -->
            <polygon class="svg-shape" points="670,50 710,75 690,115 650,115 630,75"/>
            <text class="svg-text" x="670" y="90">PENTA</text>
            
            <!-- 六角形 -->
            <polygon class="svg-shape" points="60,200 100,180 140,200 140,240 100,260 60,240"/>
            <text class="svg-text" x="100" y="225">HEXA</text>
            
            <!-- 星形 -->
            <polygon class="svg-shape" points="230,180 240,210 270,210 245,230 255,260 230,240 205,260 215,230 190,210 220,210"/>
            <text class="svg-text" x="230" y="230">STAR</text>
            
            <!-- ひし形（path） -->
            <path class="svg-shape" d="M 370,180 L 410,220 L 370,260 L 330,220 Z"/>
            <text class="svg-text" x="370" y="225">DIAMOND</text>
            
            <!-- ハート形（path） -->
            <path class="svg-shape" d="M 530,200 C 530,190 520,180 510,180 C 500,180 490,190 490,200 L 490,200 L 530,240 L 570,200 C 570,190 560,180 550,180 C 540,180 530,190 530,200 Z"/>
            <text class="svg-text" x="530" y="225">HEART</text>
            
            <!-- 矢印（path） -->
            <path class="svg-shape" d="M 650,220 L 680,220 L 680,210 L 710,230 L 680,250 L 680,240 L 650,240 Z"/>
            <text class="svg-text" x="680" y="275">ARROW</text>
          </svg>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

line_variations_demo.xml

線のバリエーション・デモ　※基本線や点線、矢印、先端スタイルなど

<dashboard version="1.1">
  <label>線のバリエーション デモ</label>
  <description>実線・点線・矢印・曲線の全パターン</description>
  
  <row>
    <panel>
      <title>基本の線スタイル</title>
      <html>
        <style>
          .line-demo {
            width: 100%;
            height: 400px;
            background: #000;
            position: relative;
          }
          
          .line-demo svg {
            width: 100%;
            height: 100%;
          }
          
          .line-label {
            fill: #0ff;
            font-family: monospace;
            font-size: 11px;
          }
          
          /* 実線バリエーション */
          .solid-thin { stroke: #0ff; stroke-width: 1; fill: none; }
          .solid-normal { stroke: #0ff; stroke-width: 2; fill: none; }
          .solid-thick { stroke: #0ff; stroke-width: 4; fill: none; }
          .solid-very-thick { stroke: #0ff; stroke-width: 8; fill: none; }
          
          /* 点線バリエーション */
          .dotted { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 2, 3; }
          .dashed { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 5, 5; }
          .long-dash { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 10, 5; }
          .dash-dot { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 10, 5, 2, 5; }
          
          /* 線端スタイル */
          .round-cap { stroke-linecap: round; }
          .square-cap { stroke-linecap: square; }
          .butt-cap { stroke-linecap: butt; }
        </style>
        
        <div class="line-demo">
          <svg>
            <!-- 実線の太さバリエーション -->
            <text class="line-label" x="10" y="25">実線の太さ:</text>
            
            <line class="solid-thin" x1="120" y1="20" x2="300" y2="20"/>
            <text class="line-label" x="310" y="25">Thin (1px)</text>
            
            <line class="solid-normal" x1="120" y1="40" x2="300" y2="40"/>
            <text class="line-label" x="310" y="45">Normal (2px)</text>
            
            <line class="solid-thick" x1="120" y1="60" x2="300" y2="60"/>
            <text class="line-label" x="310" y="65">Thick (4px)</text>
            
            <line class="solid-very-thick" x1="120" y1="85" x2="300" y2="85"/>
            <text class="line-label" x="310" y="90">Very Thick (8px)</text>
            
            <!-- 点線バリエーション -->
            <text class="line-label" x="10" y="135">点線スタイル:</text>
            
            <line class="dotted" x1="120" y1="130" x2="300" y2="130"/>
            <text class="line-label" x="310" y="135">Dotted (2,3)</text>
            
            <line class="dashed" x1="120" y1="150" x2="300" y2="150"/>
            <text class="line-label" x="310" y="155">Dashed (5,5)</text>
            
            <line class="long-dash" x1="120" y1="170" x2="300" y2="170"/>
            <text class="line-label" x="310" y="175">Long Dash (10,5)</text>
            
            <line class="dash-dot" x1="120" y1="190" x2="300" y2="190"/>
            <text class="line-label" x="310" y="195">Dash-Dot (10,5,2,5)</text>
            
            <!-- 線端スタイル -->
            <text class="line-label" x="10" y="235">線端スタイル:</text>
            
            <line class="solid-very-thick round-cap" x1="120" y1="230" x2="300" y2="230" stroke="#f0f"/>
            <text class="line-label" x="310" y="235">Round Cap</text>
            
            <line class="solid-very-thick square-cap" x1="120" y1="250" x2="300" y2="250" stroke="#f0f"/>
            <text class="line-label" x="310" y="255">Square Cap</text>
            
            <line class="solid-very-thick butt-cap" x1="120" y1="270" x2="300" y2="270" stroke="#f0f"/>
            <text class="line-label" x="310" y="275">Butt Cap (default)</text>
            
            <!-- 色バリエーション -->
            <text class="line-label" x="10" y="315">色バリエーション:</text>
            
            <line class="solid-thick" x1="120" y1="310" x2="180" y2="310" stroke="#0ff"/>
            <line class="solid-thick" x1="190" y1="310" x2="250" y2="310" stroke="#ff0"/>
            <line class="solid-thick" x1="260" y1="310" x2="320" y2="310" stroke="#f0f"/>
            <line class="solid-thick" x1="330" y1="310" x2="390" y2="310" stroke="#0f0"/>
            <line class="solid-thick" x1="400" y1="310" x2="460" y2="310" stroke="#f00"/>
            <line class="solid-thick" x1="470" y1="310" x2="530" y2="310" stroke="#f80"/>
            <text class="line-label" x="540" y="315">Cyan/Yellow/Magenta/Green/Red/Orange</text>
          </svg>
        </div>
      </html>
    </panel>
  </row>
  
  <row>
    <panel>
      <title>矢印バリエーション</title>
      <html>
        <style>
          .arrow-demo {
            width: 100%;
            height: 350px;
            background: #000;
            position: relative;
          }
          
          .arrow-demo svg {
            width: 100%;
            height: 100%;
          }
        </style>
        
        <div class="arrow-demo">
          <svg>
            <!-- 矢印マーカーの定義 -->
            <defs>
              <!-- 通常の矢印（右向き） -->
              <marker id="arrow-end" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                <polygon points="0 0, 10 3, 0 6" fill="#0ff"/>
              </marker>
              
              <!-- 逆向き矢印（左向き） -->
              <marker id="arrow-start" markerWidth="10" markerHeight="10" refX="1" refY="3" orient="auto">
                <polygon points="10 0, 0 3, 10 6" fill="#0ff"/>
              </marker>
              
              <!-- 大きい矢印 -->
              <marker id="arrow-large" markerWidth="15" markerHeight="15" refX="13" refY="5" orient="auto">
                <polygon points="0 0, 15 5, 0 10" fill="#ff0"/>
              </marker>
              
              <!-- 三角形の矢印 -->
              <marker id="arrow-triangle" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
                <polygon points="0 0, 12 6, 0 12" fill="#f0f"/>
              </marker>
              
              <!-- 丸の矢印 -->
              <marker id="arrow-circle" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
                <circle cx="5" cy="5" r="3" fill="#0f0"/>
              </marker>
            </defs>
            
            <text class="line-label" x="10" y="25">片側矢印:</text>
            
            <!-- 右向き矢印 -->
            <line x1="120" y1="20" x2="300" y2="20" stroke="#0ff" stroke-width="2" marker-end="url(#arrow-end)"/>
            <text class="line-label" x="310" y="25">Right Arrow</text>
            
            <!-- 左向き矢印 -->
            <line x1="120" y1="40" x2="300" y2="40" stroke="#0ff" stroke-width="2" marker-start="url(#arrow-start)"/>
            <text class="line-label" x="310" y="45">Left Arrow</text>
            
            <text class="line-label" x="10" y="75">両端矢印:</text>
            
            <!-- 両端矢印 -->
            <line x1="120" y1="70" x2="300" y2="70" stroke="#0ff" stroke-width="2" 
                  marker-start="url(#arrow-start)" marker-end="url(#arrow-end)"/>
            <text class="line-label" x="310" y="75">Double Arrow</text>
            
            <text class="line-label" x="10" y="105">サイズバリエーション:</text>
            
            <!-- 大きい矢印 -->
            <line x1="120" y1="100" x2="300" y2="100" stroke="#ff0" stroke-width="3" marker-end="url(#arrow-large)"/>
            <text class="line-label" x="310" y="105">Large Arrow</text>
            
            <text class="line-label" x="10" y="135">形状バリエーション:</text>
            
            <!-- 三角形矢印 -->
            <line x1="120" y1="130" x2="300" y2="130" stroke="#f0f" stroke-width="2" marker-end="url(#arrow-triangle)"/>
            <text class="line-label" x="310" y="135">Triangle Arrow</text>
            
            <!-- 丸矢印 -->
            <line x1="120" y1="150" x2="300" y2="150" stroke="#0f0" stroke-width="2" marker-end="url(#arrow-circle)"/>
            <text class="line-label" x="310" y="155">Circle Arrow</text>
            
            <text class="line-label" x="10" y="185">点線と矢印の組み合わせ:</text>
            
            <!-- 点線+矢印 -->
            <line x1="120" y1="180" x2="300" y2="180" stroke="#0ff" stroke-width="2" 
                  stroke-dasharray="5,5" marker-end="url(#arrow-end)"/>
            <text class="line-label" x="310" y="185">Dashed + Arrow</text>
            
            <!-- 太い点線+矢印 -->
            <line x1="120" y1="200" x2="300" y2="200" stroke="#ff0" stroke-width="4" 
                  stroke-dasharray="10,5" marker-end="url(#arrow-large)"/>
            <text class="line-label" x="310" y="205">Thick Dashed + Arrow</text>
            
            <text class="line-label" x="10" y="235">斜め方向の矢印:</text>
            
            <!-- 斜め矢印（右下） -->
            <line x1="120" y1="230" x2="250" y2="280" stroke="#0ff" stroke-width="2" marker-end="url(#arrow-end)"/>
            <text class="line-label" x="260" y="260">Diagonal ↘</text>
            
            <!-- 斜め矢印（右上） -->
            <line x1="400" y1="280" x2="530" y2="230" stroke="#f0f" stroke-width="2" marker-end="url(#arrow-end)"/>
            <text class="line-label" x="540" y="260">Diagonal ↗</text>
          </svg>
        </div>
      </html>
    </panel>
  </row>
  
  <row>
    <panel>
      <title>曲線バリエーション</title>
      <html>
        <style>
          .curve-demo {
            width: 100%;
            height: 400px;
            background: #000;
            position: relative;
          }
          
          .curve-demo svg {
            width: 100%;
            height: 100%;
          }
        </style>
        
        <div class="curve-demo">
          <svg>
            <text class="line-label" x="10" y="35">二次ベジェ曲線 (Q):</text>
            
            <!-- 上向き曲線 -->
            <path d="M 120,30 Q 200,10 280,30" stroke="#0ff" stroke-width="2" fill="none"/>
            <text class="line-label" x="290" y="35">Upward Curve</text>
            
            <!-- 下向き曲線 -->
            <path d="M 120,60 Q 200,80 280,60" stroke="#0ff" stroke-width="2" fill="none"/>
            <text class="line-label" x="290" y="65">Downward Curve</text>
            
            <text class="line-label" x="10" y="115">三次ベジェ曲線 (C):</text>
            
            <!-- S字曲線 -->
            <path d="M 120,110 C 160,90 200,130 240,110" stroke="#ff0" stroke-width="2" fill="none"/>
            <text class="line-label" x="250" y="115">S-Curve</text>
            
            <!-- 波形 -->
            <path d="M 120,140 C 140,120 160,160 180,140 C 200,120 220,160 240,140" stroke="#ff0" stroke-width="2" fill="none"/>
            <text class="line-label" x="250" y="145">Wave</text>
            
            <text class="line-label" x="10" y="185">円弧 (A):</text>
            
            <!-- 半円 -->
            <path d="M 120,180 A 60,60 0 0,1 240,180" stroke="#f0f" stroke-width="2" fill="none"/>
            <text class="line-label" x="250" y="185">Semicircle</text>
            
            <!-- 楕円弧 -->
            <path d="M 120,210 A 80,40 0 0,0 280,210" stroke="#f0f" stroke-width="2" fill="none"/>
            <text class="line-label" x="290" y="215">Ellipse Arc</text>
            
            <text class="line-label" x="10" y="255">曲線+矢印:</text>
            
            <defs>
              <marker id="curve-arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                <polygon points="0 0, 10 3, 0 6" fill="#0ff"/>
              </marker>
            </defs>
            
            <!-- 曲線矢印 -->
            <path d="M 120,250 Q 200,230 280,250" stroke="#0ff" stroke-width="2" fill="none" marker-end="url(#curve-arrow)"/>
            <text class="line-label" x="290" y="255">Curved Arrow</text>
            
            <!-- S字矢印 -->
            <path d="M 120,280 C 160,260 200,300 240,280" stroke="#ff0" stroke-width="2" fill="none" marker-end="url(#curve-arrow)"/>
            <text class="line-label" x="250" y="285">S-Curve Arrow</text>
            
            <text class="line-label" x="10" y="325">複雑なパス:</text>
            
            <!-- ジグザグ -->
            <path d="M 120,320 L 140,310 L 160,320 L 180,310 L 200,320 L 220,310 L 240,320" 
                  stroke="#0f0" stroke-width="2" fill="none"/>
            <text class="line-label" x="250" y="325">Zigzag</text>
            
            <!-- スパイラル風 -->
            <path d="M 120,360 Q 130,350 140,360 Q 150,370 160,360 Q 170,350 180,360 Q 190,370 200,360" 
                  stroke="#0f0" stroke-width="2" fill="none"/>
            <text class="line-label" x="210" y="365">Spiral-like</text>
          </svg>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

complete_network_diagram.xml

完全解説版

<dashboard version="1.1">
  <label>【完成版】ネットワーク構成図 - 完全解説版</label>
  <description>全要素を完全に分解した学習用完成版</description>
  
  <row>
    <panel>
      <html>
        <style>
          /* ==========================================
             1. コンテナ設定
             ========================================== */
          .network-diagram {
            width: 100%;
            height: 600px;
            background: #000;
            position: relative;
            overflow: hidden;
          }
          
          /* ==========================================
             2. ノードの共通スタイル
             すべてのデバイスに適用される基本デザイン
             ========================================== */
          .node {
            position: absolute;          /* 自由な位置配置を可能に */
            border: 2px solid #0ff;      /* シアンの枠線 */
            background: rgba(0, 20, 20, 0.8);  /* 半透明の暗い背景 */
            color: #0ff;                 /* シアンの文字色 */
            padding: 15px;               /* 内側の余白 */
            font-family: monospace;      /* 等幅フォント */
            font-weight: bold;           /* 太字 */
            text-align: center;          /* 中央揃え */
            font-size: 12px;            /* 文字サイズ */
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);  /* ネオン光 */
          }
          
          /* ==========================================
             3. デバイスタイプ別サイズ
             ========================================== */
          
          /* ルーター: 80x80pxの正方形 */
          .router {
            width: 80px;
            height: 80px;
            line-height: 50px;  /* テキストを垂直中央に */
          }
          
          /* スイッチ: 70x70pxの正方形 */
          .switch {
            width: 70px;
            height: 70px;
            line-height: 40px;
          }
          
          /* サーバー: 100x100pxの正方形 */
          .server {
            width: 100px;
            height: 100px;
            line-height: 35px;
          }
          
          /* エンドポイント: 50x50pxの小さい正方形 */
          .endpoint {
            width: 50px;
            height: 50px;
            line-height: 20px;
            font-size: 10px;
          }
          
          /* ==========================================
             4. 役割別カラーリング
             特定の役割を持つデバイスの色を上書き
             ========================================== */
          
          /* ファイアウォール: マゼンタ */
          .firewall {
            border-color: #f0f;
            color: #f0f;
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
          }
          
          /* メインサーバー: オレンジ */
          .main-server {
            border-color: #f80;
            color: #f80;
            box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
          }
          
          /* ロードバランサー: イエロー */
          .load-balancer {
            border-color: #ff0;
            color: #ff0;
            box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
          }
          
          /* ==========================================
             5. 個別ノード配置
             ========================================== */
          
          /* === 上段（ルーター層） === */
          #r1 { top: 20px; left: 60px; }      /* 左端 */
          #r2 { top: 20px; left: 250px; }     /* 左から2番目 */
          #core-sw { top: 10px; left: 420px; } /* 中央（少し上） */
          #r3 { top: 20px; left: 620px; }     /* 右から2番目 */
          #r4 { top: 20px; left: 810px; }     /* 右端 */
          
          /* === 中段（エンドポイント＆セキュリティ層） === */
          #n7 { top: 130px; left: 10px; }     /* 左端のエンドポイント */
          #n1 { top: 130px; left: 130px; }    /* 左側のエンドポイント */
          #n2 { top: 130px; left: 760px; }    /* 右側のエンドポイント */
          
          #firewall-a { top: 180px; left: 260px; width: 140px; }  /* 左ファイアウォール */
          #main-server { top: 170px; left: 420px; }               /* メインサーバー */
          #firewall-b { top: 180px; left: 540px; width: 140px; }  /* 右ファイアウォール */
          
          /* === 下段（スイッチ＆ロードバランサー層） === */
          #sw1 { top: 340px; left: 60px; }    /* 左端スイッチ */
          #sw2 { top: 340px; left: 250px; }   /* 左中スイッチ */
          #n3 { top: 340px; left: 330px; }    /* 左側エンドポイント */
          #load-bal { top: 310px; left: 420px; height: 130px; }  /* ロードバランサー */
          #n4 { top: 340px; left: 560px; }    /* 右側エンドポイント */
          #sw3 { top: 340px; left: 620px; }   /* 右中スイッチ */
          #sw4 { top: 340px; left: 810px; }   /* 右端スイッチ */
          
          /* ==========================================
             6. SVG設定（接続線用）
             ========================================== */
          svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;  /* クリックイベントを透過 */
          }
          
          .connection {
            stroke-width: 2;
            fill: none;
          }
          
          /* 線の色 */
          .cyan { stroke: #0ff; }      /* 通常接続 */
          .yellow { stroke: #ff0; }    /* 冗長化経路 */
          .magenta { stroke: #f0f; }   /* セキュリティ関連 */
        </style>
        
        <div class="network-diagram">
          <!-- ==========================================
               SVGレイヤー（接続線）
               ノードより先に配置することで背景に
               ========================================== -->
          <svg>
            <!-- === 上段の横方向接続 === -->
            <!-- R1 → R2 -->
            <line class="connection cyan" x1="140" y1="60" x2="250" y2="60"/>
            <!-- R2 → CORE-SW -->
            <line class="connection cyan" x1="330" y1="60" x2="420" y2="60"/>
            <!-- CORE-SW → R3 -->
            <line class="connection cyan" x1="520" y1="60" x2="620" y2="60"/>
            <!-- R3 → R4 -->
            <line class="connection cyan" x1="700" y1="60" x2="810" y2="60"/>
            
            <!-- === 上段から中段への接続 === -->
            <!-- R1 → N1 (イエロー) -->
            <line class="connection yellow" x1="100" y1="100" x2="155" y2="130"/>
            <!-- R1 → N7 (シアン) -->
            <line class="connection cyan" x1="60" y1="100" x2="35" y2="130"/>
            
            <!-- R2 → FIREWALL_A (イエロー) -->
            <line class="connection yellow" x1="290" y1="100" x2="300" y2="180"/>
            <!-- R2 → N1 (シアン) -->
            <line class="connection cyan" x1="250" y1="100" x2="180" y2="130"/>
            
            <!-- CORE-SW → FIREWALL_A (マゼンタ) -->
            <line class="connection magenta" x1="470" y1="110" x2="400" y2="180"/>
            <!-- CORE-SW → FIREWALL_B (マゼンタ) -->
            <line class="connection magenta" x1="470" y1="110" x2="580" y2="180"/>
            
            <!-- R3 → FIREWALL_B (イエロー) -->
            <line class="connection yellow" x1="660" y1="100" x2="600" y2="180"/>
            <!-- R3 → N2 (シアン) -->
            <line class="connection cyan" x1="700" y1="100" x2="760" y2="130"/>
            
            <!-- R4 → SW4 (イエロー、長距離縦接続) -->
            <line class="connection yellow" x1="850" y1="100" x2="850" y2="340"/>
            
            <!-- === 中段の横方向接続 === -->
            <!-- FIREWALL_A → MAIN_SERVER -->
            <line class="connection magenta" x1="400" y1="215" x2="420" y2="215"/>
            <!-- MAIN_SERVER → FIREWALL_B -->
            <line class="connection magenta" x1="520" y1="215" x2="540" y2="215"/>
            <!-- MAIN_SERVER → LOAD_BAL -->
            <line class="connection magenta" x1="470" y1="270" x2="470" y2="310"/>
            
            <!-- === 中段から下段への接続 === -->
            <!-- FIREWALL_A → SW2 -->
            <line class="connection magenta" x1="300" y1="240" x2="290" y2="340"/>
            <!-- FIREWALL_B → SW3 -->
            <line class="connection magenta" x1="600" y1="240" x2="660" y2="340"/>
            
            <!-- === 下段の横方向接続 === -->
            <!-- SW1 → SW2 -->
            <line class="connection cyan" x1="130" y1="380" x2="250" y2="380"/>
            <!-- SW2 → N3 -->
            <line class="connection cyan" x1="320" y1="380" x2="330" y2="380"/>
            <!-- N3 → LOAD_BAL -->
            <line class="connection magenta" x1="360" y1="380" x2="420" y2="380"/>
            <!-- LOAD_BAL → N4 -->
            <line class="connection magenta" x1="520" y1="380" x2="560" y2="380"/>
            <!-- N4 → SW3 -->
            <line class="connection cyan" x1="590" y1="380" x2="620" y2="380"/>
            <!-- SW3 → SW4 -->
            <line class="connection cyan" x1="690" y1="380" x2="810" y2="380"/>
            
            <!-- === 縦方向の長距離接続（冗長化経路） === -->
            <!-- R1 → SW1 -->
            <line class="connection yellow" x1="100" y1="100" x2="100" y2="340"/>
            <!-- R3 → SW3 -->
            <line class="connection yellow" x1="660" y1="100" x2="720" y2="340"/>
            <!-- N4 → R3 (斜め) -->
            <line class="connection yellow" x1="575" y1="340" x2="700" y2="100"/>
          </svg>
          
          <!-- ==========================================
               ノードレイヤー（デバイス）
               ========================================== -->
          
          <!-- === 上段：ルーター層 === -->
          <div id="r1" class="node router">R1</div>
          <div id="r2" class="node router">R2</div>
          <div id="core-sw" class="node server">CORE<br/>SW</div>
          <div id="r3" class="node router">R3</div>
          <div id="r4" class="node router">R4</div>
          
          <!-- === 中段：エンドポイント＆セキュリティ層 === -->
          <div id="n7" class="node endpoint">N7</div>
          <div id="n1" class="node endpoint">N1</div>
          <div id="n2" class="node endpoint">N2</div>
          
          <div id="firewall-a" class="node server firewall">FIREWALL_A</div>
          <div id="main-server" class="node server main-server">MAIN<br/>SERVER</div>
          <div id="firewall-b" class="node server firewall">FIREWALL_B</div>
          
          <!-- === 下段：スイッチ＆ロードバランサー層 === -->
          <div id="sw1" class="node switch">SW1</div>
          <div id="sw2" class="node switch">SW2</div>
          <div id="n3" class="node endpoint">N3</div>
          <div id="load-bal" class="node server load-balancer">LOAD<br/>BAL</div>
          <div id="n4" class="node endpoint">N4</div>
          <div id="sw3" class="node switch">SW3</div>
          <div id="sw4" class="node switch">SW4</div>
        </div>
      </html>
    </panel>
  </row>
  
  <!-- ==========================================
       ステータステーブル
       ========================================== -->
  <row>
    <panel>
      <title>ネットワークステータス</title>
      <table>
        <search>
          <query>| makeresults | eval device="All Systems", status="Operational" | table device status</query>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

2. デフォルトテンプレート

00_default_single_panel.xml - これから編集を始める人用の空のテンプレート

3. 図形デモ

shapes_variations_demo.xml - CSS/SVGで描ける全図形パターンの実例

4. 線デモ

line_variations_demo.xml - 実線・点線・矢印・曲線の全パターン

5. 完成版

complete_network_diagram.xml - 完全解説コメント付きの最終版

🎯 記事の特徴

完全な要素分解
- 7つのレイヤーに分解して説明
- CSSクラスの継承関係を図解
- 座標系の計算方法を詳しく解説
段階的な実装手順
- Step 0〜10まで、1つずつ機能を追加
- 各ステップで何を学ぶかが明確
- コピペですぐ試せる
豊富なバリエーション
- 図形12種類（四角、円、多角形など）
- 線10種類以上（実線、点線、矢印、曲線）
- 色、太さ、スタイルの組み合わせ
実務で使えるテクニック
- ネオン効果の強化
- ホバーエフェクト
- アニメーション
- 状態管理
- ツールチップ
座標計算の完全ガイド
- 中心座標の計算式
- 接続点の求め方
- 実例付きで理解しやすい

この記事とサンプルコードがあれば、新人エンジニアでも：

✅ Splunkダッシュボードの基礎が理解できる
✅ 自由に図形と線を描けるようになる
✅ 実務で使えるネットワーク図が作れる
✅ 応用して独自のビジュアライゼーションが開発できるようになるはず！
応援しています。

※I performed thorough testing.