@lion/ui 0.8.5 → 0.8.7

package/docs/fundamentals/node-tools/providence-analytics/assets/_mermaid.svg.js

@@ -1,1226 +0,0 @@
-import { html } from 'lit-html';
-
-/*
-
-```mermaid
-graph TD;
-    queryConfig-->providence;
-    ProvidenceConfig-->providence;
-    providence-->QueryResult;
-```
-
-*/
-export const providenceFlowSvg = html` <svg
-  id="mermaid-1592918098747"
-  width="100%"
-  xmlns="http://www.w3.org/2000/svg"
-  style="max-width: 316.46875px; max-height: 400px;"
-  viewBox="0 0 316.46875 233"
->
-  <style>
-    #mermaid-1592918098747 .label {
-      font-family:
-        trebuchet ms,
-        verdana,
-        arial;
-      color: #333;
-    }
-    #mermaid-1592918098747 .node circle,
-    #mermaid-1592918098747 .node ellipse,
-    #mermaid-1592918098747 .node polygon,
-    #mermaid-1592918098747 .node rect {
-      fill: #ececff;
-      stroke: #9370db;
-      stroke-width: 1px;
-    }
-    #mermaid-1592918098747 .node.clickable {
-      cursor: pointer;
-    }
-    #mermaid-1592918098747 .arrowheadPath {
-      fill: #333;
-    }
-    #mermaid-1592918098747 .edgePath .path {
-      stroke: #333;
-      stroke-width: 1.5px;
-    }
-    #mermaid-1592918098747 .edgeLabel {
-      background-color: #e8e8e8;
-    }
-    #mermaid-1592918098747 .cluster rect {
-      fill: #ffffde !important;
-      stroke: #aa3 !important;
-      stroke-width: 1px !important;
-    }
-    #mermaid-1592918098747 .cluster text {
-      fill: #333;
-    }
-    #mermaid-1592918098747 div.mermaidTooltip {
-      position: absolute;
-      text-align: center;
-      max-width: 200px;
-      max-height: 400px;
-      padding: 2px;
-      font-family:
-        trebuchet ms,
-        verdana,
-        arial;
-      font-size: 12px;
-      background: #ffffde;
-      border: 1px solid #aa3;
-      border-radius: 2px;
-      pointer-events: none;
-      z-index: 100;
-    }
-    #mermaid-1592918098747 .actor {
-      stroke: #ccf;
-      fill: #ececff;
-    }
-    #mermaid-1592918098747 text.actor {
-      fill: #000;
-      stroke: none;
-    }
-    #mermaid-1592918098747 .actor-line {
-      stroke: grey;
-    }
-    #mermaid-1592918098747 .messageLine0 {
-      marker-end: 'url(#arrowhead)';
-    }
-    #mermaid-1592918098747 .messageLine0,
-    #mermaid-1592918098747 .messageLine1 {
-      stroke-width: 1.5;
-      stroke-dasharray: '2 2';
-      stroke: #333;
-    }
-    #mermaid-1592918098747 #arrowhead {
-      fill: #333;
-    }
-    #mermaid-1592918098747 #crosshead path {
-      fill: #333 !important;
-      stroke: #333 !important;
-    }
-    #mermaid-1592918098747 .messageText {
-      fill: #333;
-      stroke: none;
-    }
-    #mermaid-1592918098747 .labelBox {
-      stroke: #ccf;
-      fill: #ececff;
-    }
-    #mermaid-1592918098747 .labelText,
-    #mermaid-1592918098747 .loopText {
-      fill: #000;
-      stroke: none;
-    }
-    #mermaid-1592918098747 .loopLine {
-      stroke-width: 2;
-      stroke-dasharray: '2 2';
-      marker-end: 'url(#arrowhead)';
-      stroke: #ccf;
-    }
-    #mermaid-1592918098747 .note {
-      stroke: #aa3;
-      fill: #fff5ad;
-    }
-    #mermaid-1592918098747 .noteText {
-      fill: #000;
-      stroke: none;
-      font-family:
-        trebuchet ms,
-        verdana,
-        arial;
-      font-size: 14px;
-    }
-    #mermaid-1592918098747 .section {
-      stroke: none;
-      opacity: 0.2;
-    }
-    #mermaid-1592918098747 .section0 {
-      fill: rgba(102, 102, 255, 0.49);
-    }
-    #mermaid-1592918098747 .section2 {
-      fill: #fff400;
-    }
-    #mermaid-1592918098747 .section1,
-    #mermaid-1592918098747 .section3 {
-      fill: #fff;
-      opacity: 0.2;
-    }
-    #mermaid-1592918098747 .sectionTitle0,
-    #mermaid-1592918098747 .sectionTitle1,
-    #mermaid-1592918098747 .sectionTitle2,
-    #mermaid-1592918098747 .sectionTitle3 {
-      fill: #333;
-    }
-    #mermaid-1592918098747 .sectionTitle {
-      text-anchor: start;
-      font-size: 11px;
-      text-height: 14px;
-    }
-    #mermaid-1592918098747 .grid .tick {
-      stroke: #d3d3d3;
-      opacity: 0.3;
-      shape-rendering: crispEdges;
-    }
-    #mermaid-1592918098747 .grid path {
-      stroke-width: 0;
-    }
-    #mermaid-1592918098747 .today {
-      fill: none;
-      stroke: red;
-      stroke-width: 2px;
-    }
-    #mermaid-1592918098747 .task {
-      stroke-width: 2;
-    }
-    #mermaid-1592918098747 .taskText {
-      text-anchor: middle;
-      font-size: 11px;
-    }
-    #mermaid-1592918098747 .taskTextOutsideRight {
-      fill: #000;
-      text-anchor: start;
-      font-size: 11px;
-    }
-    #mermaid-1592918098747 .taskTextOutsideLeft {
-      fill: #000;
-      text-anchor: end;
-      font-size: 11px;
-    }
-    #mermaid-1592918098747 .taskText0,
-    #mermaid-1592918098747 .taskText1,
-    #mermaid-1592918098747 .taskText2,
-    #mermaid-1592918098747 .taskText3 {
-      fill: #fff;
-    }
-    #mermaid-1592918098747 .task0,
-    #mermaid-1592918098747 .task1,
-    #mermaid-1592918098747 .task2,
-    #mermaid-1592918098747 .task3 {
-      fill: #8a90dd;
-      stroke: #534fbc;
-    }
-    #mermaid-1592918098747 .taskTextOutside0,
-    #mermaid-1592918098747 .taskTextOutside1,
-    #mermaid-1592918098747 .taskTextOutside2,
-    #mermaid-1592918098747 .taskTextOutside3 {
-      fill: #000;
-    }
-    #mermaid-1592918098747 .active0,
-    #mermaid-1592918098747 .active1,
-    #mermaid-1592918098747 .active2,
-    #mermaid-1592918098747 .active3 {
-      fill: #bfc7ff;
-      stroke: #534fbc;
-    }
-    #mermaid-1592918098747 .activeText0,
-    #mermaid-1592918098747 .activeText1,
-    #mermaid-1592918098747 .activeText2,
-    #mermaid-1592918098747 .activeText3 {
-      fill: #000 !important;
-    }
-    #mermaid-1592918098747 .done0,
-    #mermaid-1592918098747 .done1,
-    #mermaid-1592918098747 .done2,
-    #mermaid-1592918098747 .done3 {
-      stroke: grey;
-      fill: #d3d3d3;
-      stroke-width: 2;
-    }
-    #mermaid-1592918098747 .doneText0,
-    #mermaid-1592918098747 .doneText1,
-    #mermaid-1592918098747 .doneText2,
-    #mermaid-1592918098747 .doneText3 {
-      fill: #000 !important;
-    }
-    #mermaid-1592918098747 .crit0,
-    #mermaid-1592918098747 .crit1,
-    #mermaid-1592918098747 .crit2,
-    #mermaid-1592918098747 .crit3 {
-      stroke: #f88;
-      fill: red;
-      stroke-width: 2;
-    }
-    #mermaid-1592918098747 .activeCrit0,
-    #mermaid-1592918098747 .activeCrit1,
-    #mermaid-1592918098747 .activeCrit2,
-    #mermaid-1592918098747 .activeCrit3 {
-      stroke: #f88;
-      fill: #bfc7ff;
-      stroke-width: 2;
-    }
-    #mermaid-1592918098747 .doneCrit0,
-    #mermaid-1592918098747 .doneCrit1,
-    #mermaid-1592918098747 .doneCrit2,
-    #mermaid-1592918098747 .doneCrit3 {
-      stroke: #f88;
-      fill: #d3d3d3;
-      stroke-width: 2;
-      cursor: pointer;
-      shape-rendering: crispEdges;
-    }
-    #mermaid-1592918098747 .activeCritText0,
-    #mermaid-1592918098747 .activeCritText1,
-    #mermaid-1592918098747 .activeCritText2,
-    #mermaid-1592918098747 .activeCritText3,
-    #mermaid-1592918098747 .doneCritText0,
-    #mermaid-1592918098747 .doneCritText1,
-    #mermaid-1592918098747 .doneCritText2,
-    #mermaid-1592918098747 .doneCritText3 {
-      fill: #000 !important;
-    }
-    #mermaid-1592918098747 .titleText {
-      text-anchor: middle;
-      font-size: 18px;
-      fill: #000;
-    }
-    #mermaid-1592918098747 g.classGroup text {
-      fill: #9370db;
-      stroke: none;
-      font-family:
-        trebuchet ms,
-        verdana,
-        arial;
-      font-size: 10px;
-    }
-    #mermaid-1592918098747 g.classGroup rect {
-      fill: #ececff;
-      stroke: #9370db;
-    }
-    #mermaid-1592918098747 g.classGroup line {
-      stroke: #9370db;
-      stroke-width: 1;
-    }
-    #mermaid-1592918098747 .classLabel .box {
-      stroke: none;
-      stroke-width: 0;
-      fill: #ececff;
-      opacity: 0.5;
-    }
-    #mermaid-1592918098747 .classLabel .label {
-      fill: #9370db;
-      font-size: 10px;
-    }
-    #mermaid-1592918098747 .relation {
-      stroke: #9370db;
-      stroke-width: 1;
-      fill: none;
-    }
-    #mermaid-1592918098747 #compositionEnd,
-    #mermaid-1592918098747 #compositionStart {
-      fill: #9370db;
-      stroke: #9370db;
-      stroke-width: 1;
-    }
-    #mermaid-1592918098747 #aggregationEnd,
-    #mermaid-1592918098747 #aggregationStart {
-      fill: #ececff;
-      stroke: #9370db;
-      stroke-width: 1;
-    }
-    #mermaid-1592918098747 #dependencyEnd,
-    #mermaid-1592918098747 #dependencyStart,
-    #mermaid-1592918098747 #extensionEnd,
-    #mermaid-1592918098747 #extensionStart {
-      fill: #9370db;
-      stroke: #9370db;
-      stroke-width: 1;
-    }
-    #mermaid-1592918098747 .branch-label,
-    #mermaid-1592918098747 .commit-id,
-    #mermaid-1592918098747 .commit-msg {
-      fill: #d3d3d3;
-      color: #d3d3d3;
-    }
-  </style>
-  <style>
-    #mermaid-1592918098747 {
-      color: rgb(0, 0, 0);
-      font: normal normal 400 normal 16px / normal 'Times New Roman';
-    }
-  </style>
-  <g transform="translate(-12, -12)">
-    <g class="output">
-      <g class="clusters"></g>
-      <g class="edgePaths">
-        <g class="edgePath" style="opacity: 1;">
-          <path
-            class="path"
-            d="M72.953125,59L72.953125,84L122.17626404494382,109"
-            marker-end="url(#arrowhead13)"
-            style="fill:none"
-          ></path>
-          <defs>
-            <marker
-              id="arrowhead13"
-              viewBox="0 0 10 10"
-              refX="9"
-              refY="5"
-              markerUnits="strokeWidth"
-              markerWidth="8"
-              markerHeight="6"
-              orient="auto"
-            >
-              <path
-                d="M 0 0 L 10 5 L 0 10 z"
-                class="arrowheadPath"
-                style="stroke-width: 1; stroke-dasharray: 1, 0;"
-              ></path>
-            </marker>
-          </defs>
-        </g>
-        <g class="edgePath" style="opacity: 1;">
-          <path
-            class="path"
-            d="M248.1875,59L248.1875,84L198.96436095505618,109"
-            marker-end="url(#arrowhead14)"
-            style="fill:none"
-          ></path>
-          <defs>
-            <marker
-              id="arrowhead14"
-              viewBox="0 0 10 10"
-              refX="9"
-              refY="5"
-              markerUnits="strokeWidth"
-              markerWidth="8"
-              markerHeight="6"
-              orient="auto"
-            >
-              <path
-                d="M 0 0 L 10 5 L 0 10 z"
-                class="arrowheadPath"
-                style="stroke-width: 1; stroke-dasharray: 1, 0;"
-              ></path>
-            </marker>
-          </defs>
-        </g>
-        <g class="edgePath" style="opacity: 1;">
-          <path
-            class="path"
-            d="M160.5703125,148L160.5703125,173L160.5703125,198"
-            marker-end="url(#arrowhead15)"
-            style="fill:none"
-          ></path>
-          <defs>
-            <marker
-              id="arrowhead15"
-              viewBox="0 0 10 10"
-              refX="9"
-              refY="5"
-              markerUnits="strokeWidth"
-              markerWidth="8"
-              markerHeight="6"
-              orient="auto"
-            >
-              <path
-                d="M 0 0 L 10 5 L 0 10 z"
-                class="arrowheadPath"
-                style="stroke-width: 1; stroke-dasharray: 1, 0;"
-              ></path>
-            </marker>
-          </defs>
-        </g>
-      </g>
-      <g class="edgeLabels">
-        <g class="edgeLabel" style="opacity: 1;" transform="">
-          <g transform="translate(0,0)" class="label">
-            <foreignObject width="0" height="0"
-              ><div
-                xmlns="http://www.w3.org/1999/xhtml"
-                style="display: inline-block; white-space: nowrap;"
-              >
-                <span class="edgeLabel"></span></div
-            ></foreignObject>
-          </g>
-        </g>
-        <g class="edgeLabel" style="opacity: 1;" transform="">
-          <g transform="translate(0,0)" class="label">
-            <foreignObject width="0" height="0"
-              ><div
-                xmlns="http://www.w3.org/1999/xhtml"
-                style="display: inline-block; white-space: nowrap;"
-              >
-                <span class="edgeLabel"></span></div
-            ></foreignObject>
-          </g>
-        </g>
-        <g class="edgeLabel" style="opacity: 1;" transform="">
-          <g transform="translate(0,0)" class="label">
-            <foreignObject width="0" height="0"
-              ><div
-                xmlns="http://www.w3.org/1999/xhtml"
-                style="display: inline-block; white-space: nowrap;"
-              >
-                <span class="edgeLabel"></span></div
-            ></foreignObject>
-          </g>
-        </g>
-      </g>
-      <g class="nodes">
-        <g class="node" id="queryConfig" transform="translate(72.953125,39.5)" style="opacity: 1;">
-          <rect rx="0" ry="0" x="-52.953125" y="-19.5" width="105.90625" height="39"></rect>
-          <g class="label" transform="translate(0,0)">
-            <g transform="translate(-42.953125,-9.5)">
-              <foreignObject width="85.90625" height="19"
-                ><div
-                  xmlns="http://www.w3.org/1999/xhtml"
-                  style="display: inline-block; white-space: nowrap;"
-                >
-                  queryConfig
-                </div></foreignObject
-              >
-            </g>
-          </g>
-        </g>
-        <g
-          class="node"
-          id="providence"
-          transform="translate(160.5703125,128.5)"
-          style="opacity: 1;"
-        >
-          <rect rx="0" ry="0" x="-49.578125" y="-19.5" width="99.15625" height="39"></rect>
-          <g class="label" transform="translate(0,0)">
-            <g transform="translate(-39.578125,-9.5)">
-              <foreignObject width="79.15625" height="19"
-                ><div
-                  xmlns="http://www.w3.org/1999/xhtml"
-                  style="display: inline-block; white-space: nowrap;"
-                >
-                  providence
-                </div></foreignObject
-              >
-            </g>
-          </g>
-        </g>
-        <g
-          class="node"
-          id="ProvidenceConfig"
-          transform="translate(248.1875,39.5)"
-          style="opacity: 1;"
-        >
-          <rect rx="0" ry="0" x="-72.28125" y="-19.5" width="144.5625" height="39"></rect>
-          <g class="label" transform="translate(0,0)">
-            <g transform="translate(-62.28125,-9.5)">
-              <foreignObject width="124.5625" height="19"
-                ><div
-                  xmlns="http://www.w3.org/1999/xhtml"
-                  style="display: inline-block; white-space: nowrap;"
-                >
-                  ProvidenceConfig
-                </div></foreignObject
-              >
-            </g>
-          </g>
-        </g>
-        <g
-          class="node"
-          id="QueryResult"
-          transform="translate(160.5703125,217.5)"
-          style="opacity: 1;"
-        >
-          <rect rx="0" ry="0" x="-53.359375" y="-19.5" width="106.71875" height="39"></rect>
-          <g class="label" transform="translate(0,0)">
-            <g transform="translate(-43.359375,-9.5)">
-              <foreignObject width="86.71875" height="19"
-                ><div
-                  xmlns="http://www.w3.org/1999/xhtml"
-                  style="display: inline-block; white-space: nowrap;"
-                >
-                  QueryResult
-                </div></foreignObject
-              >
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>`;
-
-/*
-
-```mermaid
-sequenceDiagram
-    participant providence
-    participant InputDataService
-    participant QueryService
-    participant ReportService
-    providence->>InputDataService: Give all search targets, based on 'queryConfig'
-    InputDataService->>providence: 'InputData'
-    providence->>QueryService: Run query, based on 'queryConfig'
-    QueryService->>providence: 'QueryResult'
-    providence->>ReportService: Give a report, based on 'QueryResult' and 'ProvidenceConfig'
-    ReportService->>providence: Done...
-```
-
-*/
-export const providenceInternalFlowSvg = html`
-  <svg
-    id="mermaid-1592918099462"
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    style="max-width:850px; max-height: 400px;"
-    viewBox="-50 -10 850 371"
-  >
-    <style>
-      #mermaid-1592918099462 .label {
-        font-family:
-          trebuchet ms,
-          verdana,
-          arial;
-        color: #333;
-      }
-      #mermaid-1592918099462 .node circle,
-      #mermaid-1592918099462 .node ellipse,
-      #mermaid-1592918099462 .node polygon,
-      #mermaid-1592918099462 .node rect {
-        fill: #ececff;
-        stroke: #9370db;
-        stroke-width: 1px;
-      }
-      #mermaid-1592918099462 .node.clickable {
-        cursor: pointer;
-      }
-      #mermaid-1592918099462 .arrowheadPath {
-        fill: #333;
-      }
-      #mermaid-1592918099462 .edgePath .path {
-        stroke: #333;
-        stroke-width: 1.5px;
-      }
-      #mermaid-1592918099462 .edgeLabel {
-        background-color: #e8e8e8;
-      }
-      #mermaid-1592918099462 .cluster rect {
-        fill: #ffffde !important;
-        stroke: #aa3 !important;
-        stroke-width: 1px !important;
-      }
-      #mermaid-1592918099462 .cluster text {
-        fill: #333;
-      }
-      #mermaid-1592918099462 div.mermaidTooltip {
-        position: absolute;
-        text-align: center;
-        max-width: 200px;
-        max-height: 400px;
-        padding: 2px;
-        font-family:
-          trebuchet ms,
-          verdana,
-          arial;
-        font-size: 12px;
-        background: #ffffde;
-        border: 1px solid #aa3;
-        border-radius: 2px;
-        pointer-events: none;
-        z-index: 100;
-      }
-      #mermaid-1592918099462 .actor {
-        stroke: #ccf;
-        fill: #ececff;
-      }
-      #mermaid-1592918099462 text.actor {
-        fill: #000;
-        stroke: none;
-      }
-      #mermaid-1592918099462 .actor-line {
-        stroke: grey;
-      }
-      #mermaid-1592918099462 .messageLine0 {
-        marker-end: 'url(#arrowhead)';
-      }
-      #mermaid-1592918099462 .messageLine0,
-      #mermaid-1592918099462 .messageLine1 {
-        stroke-width: 1.5;
-        stroke-dasharray: '2 2';
-        stroke: #333;
-      }
-      #mermaid-1592918099462 #arrowhead {
-        fill: #333;
-      }
-      #mermaid-1592918099462 #crosshead path {
-        fill: #333 !important;
-        stroke: #333 !important;
-      }
-      #mermaid-1592918099462 .messageText {
-        fill: #333;
-        stroke: none;
-      }
-      #mermaid-1592918099462 .labelBox {
-        stroke: #ccf;
-        fill: #ececff;
-      }
-      #mermaid-1592918099462 .labelText,
-      #mermaid-1592918099462 .loopText {
-        fill: #000;
-        stroke: none;
-      }
-      #mermaid-1592918099462 .loopLine {
-        stroke-width: 2;
-        stroke-dasharray: '2 2';
-        marker-end: 'url(#arrowhead)';
-        stroke: #ccf;
-      }
-      #mermaid-1592918099462 .note {
-        stroke: #aa3;
-        fill: #fff5ad;
-      }
-      #mermaid-1592918099462 .noteText {
-        fill: #000;
-        stroke: none;
-        font-family:
-          trebuchet ms,
-          verdana,
-          arial;
-        font-size: 14px;
-      }
-      #mermaid-1592918099462 .section {
-        stroke: none;
-        opacity: 0.2;
-      }
-      #mermaid-1592918099462 .section0 {
-        fill: rgba(102, 102, 255, 0.49);
-      }
-      #mermaid-1592918099462 .section2 {
-        fill: #fff400;
-      }
-      #mermaid-1592918099462 .section1,
-      #mermaid-1592918099462 .section3 {
-        fill: #fff;
-        opacity: 0.2;
-      }
-      #mermaid-1592918099462 .sectionTitle0,
-      #mermaid-1592918099462 .sectionTitle1,
-      #mermaid-1592918099462 .sectionTitle2,
-      #mermaid-1592918099462 .sectionTitle3 {
-        fill: #333;
-      }
-      #mermaid-1592918099462 .sectionTitle {
-        text-anchor: start;
-        font-size: 11px;
-        text-height: 14px;
-      }
-      #mermaid-1592918099462 .grid .tick {
-        stroke: #d3d3d3;
-        opacity: 0.3;
-        shape-rendering: crispEdges;
-      }
-      #mermaid-1592918099462 .grid path {
-        stroke-width: 0;
-      }
-      #mermaid-1592918099462 .today {
-        fill: none;
-        stroke: red;
-        stroke-width: 2px;
-      }
-      #mermaid-1592918099462 .task {
-        stroke-width: 2;
-      }
-      #mermaid-1592918099462 .taskText {
-        text-anchor: middle;
-        font-size: 11px;
-      }
-      #mermaid-1592918099462 .taskTextOutsideRight {
-        fill: #000;
-        text-anchor: start;
-        font-size: 11px;
-      }
-      #mermaid-1592918099462 .taskTextOutsideLeft {
-        fill: #000;
-        text-anchor: end;
-        font-size: 11px;
-      }
-      #mermaid-1592918099462 .taskText0,
-      #mermaid-1592918099462 .taskText1,
-      #mermaid-1592918099462 .taskText2,
-      #mermaid-1592918099462 .taskText3 {
-        fill: #fff;
-      }
-      #mermaid-1592918099462 .task0,
-      #mermaid-1592918099462 .task1,
-      #mermaid-1592918099462 .task2,
-      #mermaid-1592918099462 .task3 {
-        fill: #8a90dd;
-        stroke: #534fbc;
-      }
-      #mermaid-1592918099462 .taskTextOutside0,
-      #mermaid-1592918099462 .taskTextOutside1,
-      #mermaid-1592918099462 .taskTextOutside2,
-      #mermaid-1592918099462 .taskTextOutside3 {
-        fill: #000;
-      }
-      #mermaid-1592918099462 .active0,
-      #mermaid-1592918099462 .active1,
-      #mermaid-1592918099462 .active2,
-      #mermaid-1592918099462 .active3 {
-        fill: #bfc7ff;
-        stroke: #534fbc;
-      }
-      #mermaid-1592918099462 .activeText0,
-      #mermaid-1592918099462 .activeText1,
-      #mermaid-1592918099462 .activeText2,
-      #mermaid-1592918099462 .activeText3 {
-        fill: #000 !important;
-      }
-      #mermaid-1592918099462 .done0,
-      #mermaid-1592918099462 .done1,
-      #mermaid-1592918099462 .done2,
-      #mermaid-1592918099462 .done3 {
-        stroke: grey;
-        fill: #d3d3d3;
-        stroke-width: 2;
-      }
-      #mermaid-1592918099462 .doneText0,
-      #mermaid-1592918099462 .doneText1,
-      #mermaid-1592918099462 .doneText2,
-      #mermaid-1592918099462 .doneText3 {
-        fill: #000 !important;
-      }
-      #mermaid-1592918099462 .crit0,
-      #mermaid-1592918099462 .crit1,
-      #mermaid-1592918099462 .crit2,
-      #mermaid-1592918099462 .crit3 {
-        stroke: #f88;
-        fill: red;
-        stroke-width: 2;
-      }
-      #mermaid-1592918099462 .activeCrit0,
-      #mermaid-1592918099462 .activeCrit1,
-      #mermaid-1592918099462 .activeCrit2,
-      #mermaid-1592918099462 .activeCrit3 {
-        stroke: #f88;
-        fill: #bfc7ff;
-        stroke-width: 2;
-      }
-      #mermaid-1592918099462 .doneCrit0,
-      #mermaid-1592918099462 .doneCrit1,
-      #mermaid-1592918099462 .doneCrit2,
-      #mermaid-1592918099462 .doneCrit3 {
-        stroke: #f88;
-        fill: #d3d3d3;
-        stroke-width: 2;
-        cursor: pointer;
-        shape-rendering: crispEdges;
-      }
-      #mermaid-1592918099462 .activeCritText0,
-      #mermaid-1592918099462 .activeCritText1,
-      #mermaid-1592918099462 .activeCritText2,
-      #mermaid-1592918099462 .activeCritText3,
-      #mermaid-1592918099462 .doneCritText0,
-      #mermaid-1592918099462 .doneCritText1,
-      #mermaid-1592918099462 .doneCritText2,
-      #mermaid-1592918099462 .doneCritText3 {
-        fill: #000 !important;
-      }
-      #mermaid-1592918099462 .titleText {
-        text-anchor: middle;
-        font-size: 18px;
-        fill: #000;
-      }
-      #mermaid-1592918099462 g.classGroup text {
-        fill: #9370db;
-        stroke: none;
-        font-family:
-          trebuchet ms,
-          verdana,
-          arial;
-        font-size: 10px;
-      }
-      #mermaid-1592918099462 g.classGroup rect {
-        fill: #ececff;
-        stroke: #9370db;
-      }
-      #mermaid-1592918099462 g.classGroup line {
-        stroke: #9370db;
-        stroke-width: 1;
-      }
-      #mermaid-1592918099462 .classLabel .box {
-        stroke: none;
-        stroke-width: 0;
-        fill: #ececff;
-        opacity: 0.5;
-      }
-      #mermaid-1592918099462 .classLabel .label {
-        fill: #9370db;
-        font-size: 10px;
-      }
-      #mermaid-1592918099462 .relation {
-        stroke: #9370db;
-        stroke-width: 1;
-        fill: none;
-      }
-      #mermaid-1592918099462 #compositionEnd,
-      #mermaid-1592918099462 #compositionStart {
-        fill: #9370db;
-        stroke: #9370db;
-        stroke-width: 1;
-      }
-      #mermaid-1592918099462 #aggregationEnd,
-      #mermaid-1592918099462 #aggregationStart {
-        fill: #ececff;
-        stroke: #9370db;
-        stroke-width: 1;
-      }
-      #mermaid-1592918099462 #dependencyEnd,
-      #mermaid-1592918099462 #dependencyStart,
-      #mermaid-1592918099462 #extensionEnd,
-      #mermaid-1592918099462 #extensionStart {
-        fill: #9370db;
-        stroke: #9370db;
-        stroke-width: 1;
-      }
-      #mermaid-1592918099462 .branch-label,
-      #mermaid-1592918099462 .commit-id,
-      #mermaid-1592918099462 .commit-msg {
-        fill: #d3d3d3;
-        color: #d3d3d3;
-      }
-    </style>
-    <style>
-      #mermaid-1592918099462 {
-        color: rgb(0, 0, 0);
-        font: normal normal 400 normal 16px / normal 'Times New Roman';
-      }
-    </style>
-    <g></g>
-    <g>
-      <line
-        id="actor0"
-        x1="75"
-        y1="5"
-        x2="75"
-        y2="360"
-        class="actor-line"
-        stroke-width="0.5px"
-        stroke="#999"
-      ></line>
-      <rect
-        x="0"
-        y="0"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="75"
-        y="32.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="75" dy="0">providence</tspan>
-      </text>
-    </g>
-    <g>
-      <line
-        id="actor1"
-        x1="275"
-        y1="5"
-        x2="275"
-        y2="360"
-        class="actor-line"
-        stroke-width="0.5px"
-        stroke="#999"
-      ></line>
-      <rect
-        x="200"
-        y="0"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="275"
-        y="32.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="275" dy="0">InputDataService</tspan>
-      </text>
-    </g>
-    <g>
-      <line
-        id="actor2"
-        x1="475"
-        y1="5"
-        x2="475"
-        y2="360"
-        class="actor-line"
-        stroke-width="0.5px"
-        stroke="#999"
-      ></line>
-      <rect
-        x="400"
-        y="0"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="475"
-        y="32.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="475" dy="0">QueryService</tspan>
-      </text>
-    </g>
-    <g>
-      <line
-        id="actor3"
-        x1="675"
-        y1="5"
-        x2="675"
-        y2="360"
-        class="actor-line"
-        stroke-width="0.5px"
-        stroke="#999"
-      ></line>
-      <rect
-        x="600"
-        y="0"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="675"
-        y="32.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="675" dy="0">ReportService</tspan>
-      </text>
-    </g>
-    <defs>
-      <marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto">
-        <path d="M 0,0 V 4 L6,2 Z"></path>
-      </marker>
-    </defs>
-    <defs>
-      <marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4">
-        <path
-          fill="black"
-          stroke="#000000"
-          stroke-width="1px"
-          d="M 9,2 V 6 L16,4 Z"
-          style="stroke-dasharray: 0, 0;"
-        ></path>
-        <path
-          fill="none"
-          stroke="#000000"
-          stroke-width="1px"
-          d="M 0,1 L 6,7 M 6,1 L 0,7"
-          style="stroke-dasharray: 0, 0;"
-        ></path>
-      </marker>
-    </defs>
-    <g>
-      <text x="175" y="93" class="messageText" style="text-anchor: middle;">
-        Give all search targets, based on 'queryConfig'
-      </text>
-      <line
-        x1="75"
-        y1="100"
-        x2="275"
-        y2="100"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <text x="175" y="128" class="messageText" style="text-anchor: middle;">'InputData'</text>
-      <line
-        x1="275"
-        y1="135"
-        x2="75"
-        y2="135"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <text x="275" y="163" class="messageText" style="text-anchor: middle;">
-        Run query, based on 'queryConfig'
-      </text>
-      <line
-        x1="75"
-        y1="170"
-        x2="475"
-        y2="170"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <text x="275" y="198" class="messageText" style="text-anchor: middle;">'QueryResult'</text>
-      <line
-        x1="475"
-        y1="205"
-        x2="75"
-        y2="205"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <text x="375" y="233" class="messageText" style="text-anchor: middle;">
-        Give a report, based on 'QueryResult' and 'ProvidenceConfig'
-      </text>
-      <line
-        x1="75"
-        y1="240"
-        x2="675"
-        y2="240"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <text x="375" y="268" class="messageText" style="text-anchor: middle;">Done...</text>
-      <line
-        x1="675"
-        y1="275"
-        x2="75"
-        y2="275"
-        class="messageLine0"
-        stroke-width="2"
-        stroke="black"
-        marker-end="url(#arrowhead)"
-        style="fill: none;"
-      ></line>
-    </g>
-    <g>
-      <rect
-        x="0"
-        y="295"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="75"
-        y="327.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="75" dy="0">providence</tspan>
-      </text>
-    </g>
-    <g>
-      <rect
-        x="200"
-        y="295"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="275"
-        y="327.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="275" dy="0">InputDataService</tspan>
-      </text>
-    </g>
-    <g>
-      <rect
-        x="400"
-        y="295"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="475"
-        y="327.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="475" dy="0">QueryService</tspan>
-      </text>
-    </g>
-    <g>
-      <rect
-        x="600"
-        y="295"
-        fill="#eaeaea"
-        stroke="#666"
-        width="150"
-        height="65"
-        rx="3"
-        ry="3"
-        class="actor"
-      ></rect>
-      <text
-        x="675"
-        y="327.5"
-        dominant-baseline="central"
-        alignment-baseline="central"
-        class="actor"
-        style="text-anchor: middle;"
-      >
-        <tspan x="675" dy="0">ReportService</tspan>
-      </text>
-    </g>
-  </svg>
-`;