chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Service blueprint of a support request</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="640" viewBox="0 0 960 640" id="chartlet-d0a8a7f346e151bf" role="img" aria-labelledby="chartlet-d0a8a7f346e151bf-title chartlet-d0a8a7f346e151bf-description" class="chartlet-root"><title id="chartlet-d0a8a7f346e151bf-title">Service blueprint of a support request</title><desc id="chartlet-d0a8a7f346e151bf-description">Service blueprint of 3 stages, with the customer&#39;s rows above the line of interaction and the service&#39;s below it: Ask: actions: Opens a chat and describes the problem; touchpoints: Chat widget; sentiment: -1; frontstage: Greets the customer and asks for the account; backstage: Routes the chat by product and language; support: Chat platform, customer database. Solve: actions: Follows the steps; touchpoints: Chat, email; sentiment: +1; frontstage: Sends the steps and checks that they worked; backstage: Files a bug when the cause is the product; support: Knowledge base, issue tracker. Close: actions: Rates the conversation; touchpoints: Email survey; sentiment: +2; frontstage: Thanks the customer and closes the chat; backstage: Tags the conversation, updates the article; support: Survey tool, knowledge base.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-label,#chartlet-d0a8a7f346e151bf .chartlet-tick,#chartlet-d0a8a7f346e151bf .chartlet-value,#chartlet-d0a8a7f346e151bf .chartlet-value-inverse,#chartlet-d0a8a7f346e151bf .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf .chartlet-value,#chartlet-d0a8a7f346e151bf .chartlet-value-inverse{font-weight:600}#chartlet-d0a8a7f346e151bf .chartlet-value{fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d0a8a7f346e151bf .chartlet-axis-title{font-weight:600}#chartlet-d0a8a7f346e151bf .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d0a8a7f346e151bf .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d0a8a7f346e151bf .chartlet-bar,#chartlet-d0a8a7f346e151bf .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d0a8a7f346e151bf .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d0a8a7f346e151bf .chartlet-background{fill:var(--chartlet-background)}#chartlet-d0a8a7f346e151bf .chartlet-journey-stage{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue);stroke-width:1.5;rx:6px}#chartlet-d0a8a7f346e151bf .chartlet-journey-stage-text{font-size:12px;font-weight:700;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-journey-cell{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d0a8a7f346e151bf .chartlet-journey-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-journey-row{font-size:12px;font-weight:700;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf .chartlet-journey-line{stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:7 4}#chartlet-d0a8a7f346e151bf .chartlet-journey-line-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf .chartlet-journey-scale{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d0a8a7f346e151bf .chartlet-journey-zero{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d0a8a7f346e151bf .chartlet-journey-scale-text{font-size:11px;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf .chartlet-journey-sentiment{fill:none;stroke:var(--chartlet-accent);stroke-width:2.5;stroke-linejoin:round}#chartlet-d0a8a7f346e151bf .chartlet-journey-dot{fill:var(--chartlet-background);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-d0a8a7f346e151bf .chartlet-journey-value{font-size:12px;font-weight:700;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-journey-step{fill:none;stroke:var(--chartlet-accent);stroke-width:1.5;rx:3px}#chartlet-d0a8a7f346e151bf .chartlet-journey-step-on{fill:var(--chartlet-accent)}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-d0a8a7f346e151bf .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-d0a8a7f346e151bf .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-d0a8a7f346e151bf .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-d0a8a7f346e151bf .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-d0a8a7f346e151bf .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-d0a8a7f346e151bf .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-d0a8a7f346e151bf .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-d0a8a7f346e151bf .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-d0a8a7f346e151bf .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-d0a8a7f346e151bf .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d0a8a7f346e151bf .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-d0a8a7f346e151bf .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}</style><rect x="223" y="12" width="200" height="32" class="chartlet-journey-stage"/><text x="230" y="30" text-anchor="start" class="chartlet-journey-stage-text">Ask</text><rect x="429" y="12" width="200" height="32" class="chartlet-journey-stage"/><text x="436" y="30" text-anchor="start" class="chartlet-journey-stage-text">Solve</text><rect x="635" y="12" width="200" height="32" class="chartlet-journey-stage"/><text x="642" y="30" text-anchor="start" class="chartlet-journey-stage-text">Close</text><rect x="223" y="50" width="200" height="42" class="chartlet-journey-cell"/><text x="230" y="68" text-anchor="start" class="chartlet-journey-text">Opens a chat and describes the</text><text x="230" y="82" text-anchor="start" class="chartlet-journey-text">problem</text><rect x="429" y="50" width="200" height="42" class="chartlet-journey-cell"/><text x="436" y="68" text-anchor="start" class="chartlet-journey-text">Follows the steps</text><rect x="635" y="50" width="200" height="42" class="chartlet-journey-cell"/><text x="642" y="68" text-anchor="start" class="chartlet-journey-text">Rates the conversation</text><text x="119" y="65" text-anchor="start" class="chartlet-journey-row">Actions</text><rect x="223" y="98" width="200" height="34" class="chartlet-journey-cell"/><text x="230" y="116" text-anchor="start" class="chartlet-journey-text">Chat widget</text><rect x="429" y="98" width="200" height="34" class="chartlet-journey-cell"/><text x="436" y="116" text-anchor="start" class="chartlet-journey-text">Chat, email</text><rect x="635" y="98" width="200" height="34" class="chartlet-journey-cell"/><text x="642" y="116" text-anchor="start" class="chartlet-journey-text">Email survey</text><text x="119" y="113" text-anchor="start" class="chartlet-journey-row">Touchpoints</text><rect x="223" y="138" width="612" height="96" class="chartlet-journey-cell"/><line x1="223" y1="222" x2="835" y2="222" class="chartlet-journey-scale"/><text x="217" y="226" text-anchor="end" class="chartlet-journey-scale-text">-2</text><line x1="223" y1="204" x2="835" y2="204" class="chartlet-journey-scale"/><text x="217" y="208" text-anchor="end" class="chartlet-journey-scale-text">-1</text><line x1="223" y1="186" x2="835" y2="186" class="chartlet-journey-zero"/><text x="217" y="190" text-anchor="end" class="chartlet-journey-scale-text">0</text><line x1="223" y1="168" x2="835" y2="168" class="chartlet-journey-scale"/><text x="217" y="172" text-anchor="end" class="chartlet-journey-scale-text">+1</text><line x1="223" y1="150" x2="835" y2="150" class="chartlet-journey-scale"/><text x="217" y="154" text-anchor="end" class="chartlet-journey-scale-text">+2</text><polyline points="323,204 529,168 735,150" class="chartlet-journey-sentiment"/><circle cx="323" cy="204" r="5" class="chartlet-journey-dot"><title>Ask: -1</title></circle><text x="323" y="195" text-anchor="middle" class="chartlet-journey-value">-1</text><circle cx="529" cy="168" r="5" class="chartlet-journey-dot"><title>Solve: +1</title></circle><text x="529" y="159" text-anchor="middle" class="chartlet-journey-value">+1</text><circle cx="735" cy="150" r="5" class="chartlet-journey-dot"><title>Close: +2</title></circle><text x="735" y="168" text-anchor="middle" class="chartlet-journey-value">+2</text><text x="119" y="153" text-anchor="start" class="chartlet-journey-row">Sentiment</text><text x="119" y="252" text-anchor="start" class="chartlet-journey-line-label">Line of interaction</text><line x1="119" y1="259" x2="835" y2="259" class="chartlet-journey-line"/><rect x="223" y="266" width="200" height="42" class="chartlet-journey-cell"/><text x="230" y="284" text-anchor="start" class="chartlet-journey-text">Greets the customer and asks</text><text x="230" y="298" text-anchor="start" class="chartlet-journey-text">for the account</text><rect x="429" y="266" width="200" height="42" class="chartlet-journey-cell"/><text x="436" y="284" text-anchor="start" class="chartlet-journey-text">Sends the steps and checks</text><text x="436" y="298" text-anchor="start" class="chartlet-journey-text">that they worked</text><rect x="635" y="266" width="200" height="42" class="chartlet-journey-cell"/><text x="642" y="284" text-anchor="start" class="chartlet-journey-text">Thanks the customer and</text><text x="642" y="298" text-anchor="start" class="chartlet-journey-text">closes the chat</text><text x="119" y="281" text-anchor="start" class="chartlet-journey-row">Frontstage</text><text x="119" y="326" text-anchor="start" class="chartlet-journey-line-label">Line of visibility</text><line x1="119" y1="333" x2="835" y2="333" class="chartlet-journey-line"/><rect x="223" y="340" width="200" height="42" class="chartlet-journey-cell"/><text x="230" y="358" text-anchor="start" class="chartlet-journey-text">Routes the chat by product</text><text x="230" y="372" text-anchor="start" class="chartlet-journey-text">and language</text><rect x="429" y="340" width="200" height="42" class="chartlet-journey-cell"/><text x="436" y="358" text-anchor="start" class="chartlet-journey-text">Files a bug when the cause is</text><text x="436" y="372" text-anchor="start" class="chartlet-journey-text">the product</text><rect x="635" y="340" width="200" height="42" class="chartlet-journey-cell"/><text x="642" y="358" text-anchor="start" class="chartlet-journey-text">Tags the conversation,</text><text x="642" y="372" text-anchor="start" class="chartlet-journey-text">updates the article</text><text x="119" y="355" text-anchor="start" class="chartlet-journey-row">Backstage</text><rect x="223" y="388" width="200" height="42" class="chartlet-journey-cell"/><text x="230" y="406" text-anchor="start" class="chartlet-journey-text">Chat platform, customer</text><text x="230" y="420" text-anchor="start" class="chartlet-journey-text">database</text><rect x="429" y="388" width="200" height="42" class="chartlet-journey-cell"/><text x="436" y="406" text-anchor="start" class="chartlet-journey-text">Knowledge base, issue tracker</text><rect x="635" y="388" width="200" height="42" class="chartlet-journey-cell"/><text x="642" y="406" text-anchor="start" class="chartlet-journey-text">Survey tool, knowledge base</text><text x="119" y="403" text-anchor="start" class="chartlet-journey-row">Support</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="1300" viewBox="0 0 380 1300" id="chartlet-d0a8a7f346e151bf-m" role="img" aria-labelledby="chartlet-d0a8a7f346e151bf-m-title chartlet-d0a8a7f346e151bf-m-description" class="chartlet-root"><title id="chartlet-d0a8a7f346e151bf-m-title">Service blueprint of a support request</title><desc id="chartlet-d0a8a7f346e151bf-m-description">Service blueprint of 3 stages, with the customer&#39;s rows above the line of interaction and the service&#39;s below it: Ask: actions: Opens a chat and describes the problem; touchpoints: Chat widget; sentiment: -1; frontstage: Greets the customer and asks for the account; backstage: Routes the chat by product and language; support: Chat platform, customer database. Solve: actions: Follows the steps; touchpoints: Chat, email; sentiment: +1; frontstage: Sends the steps and checks that they worked; backstage: Files a bug when the cause is the product; support: Knowledge base, issue tracker. Close: actions: Rates the conversation; touchpoints: Email survey; sentiment: +2; frontstage: Thanks the customer and closes the chat; backstage: Tags the conversation, updates the article; support: Survey tool, knowledge base.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-label,#chartlet-d0a8a7f346e151bf-m .chartlet-tick,#chartlet-d0a8a7f346e151bf-m .chartlet-value,#chartlet-d0a8a7f346e151bf-m .chartlet-value-inverse,#chartlet-d0a8a7f346e151bf-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf-m .chartlet-value,#chartlet-d0a8a7f346e151bf-m .chartlet-value-inverse{font-weight:600}#chartlet-d0a8a7f346e151bf-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d0a8a7f346e151bf-m .chartlet-axis-title{font-weight:600}#chartlet-d0a8a7f346e151bf-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d0a8a7f346e151bf-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d0a8a7f346e151bf-m .chartlet-bar,#chartlet-d0a8a7f346e151bf-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d0a8a7f346e151bf-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d0a8a7f346e151bf-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-stage{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue);stroke-width:1.5;rx:6px}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-stage-text{font-size:12px;font-weight:700;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-cell{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-row{font-size:12px;font-weight:700;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-line{stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:7 4}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-line-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-scale{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-zero{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-scale-text{font-size:11px;fill:var(--chartlet-muted)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-sentiment{fill:none;stroke:var(--chartlet-accent);stroke-width:2.5;stroke-linejoin:round}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-dot{fill:var(--chartlet-background);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-value{font-size:12px;font-weight:700;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-step{fill:none;stroke:var(--chartlet-accent);stroke-width:1.5;rx:3px}#chartlet-d0a8a7f346e151bf-m .chartlet-journey-step-on{fill:var(--chartlet-accent)}#chartlet-d0a8a7f346e151bf-m .chartlet-title-small{font-size:18px}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-d0a8a7f346e151bf-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-d0a8a7f346e151bf-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-d0a8a7f346e151bf-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}</style><rect x="12" y="12" width="356" height="28" class="chartlet-journey-stage"/><text x="19" y="30" text-anchor="start" class="chartlet-journey-stage-text">Ask</text><text x="19" y="57" text-anchor="start" class="chartlet-journey-row">Actions</text><rect x="12" y="62" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="80" text-anchor="start" class="chartlet-journey-text">Opens a chat and describes the problem</text><text x="19" y="107" text-anchor="start" class="chartlet-journey-row">Touchpoints</text><rect x="12" y="112" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="130" text-anchor="start" class="chartlet-journey-text">Chat widget</text><text x="19" y="157" text-anchor="start" class="chartlet-journey-row">Sentiment</text><rect x="19" y="164" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="39" y="164" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="59" y="164" width="16" height="14" class="chartlet-journey-step"/><rect x="79" y="164" width="16" height="14" class="chartlet-journey-step"/><rect x="99" y="164" width="16" height="14" class="chartlet-journey-step"/><text x="127" y="176" text-anchor="start" class="chartlet-journey-value">-1</text><text x="19" y="202" text-anchor="start" class="chartlet-journey-line-label">Line of interaction</text><line x1="12" y1="209" x2="368" y2="209" class="chartlet-journey-line"/><text x="19" y="227" text-anchor="start" class="chartlet-journey-row">Frontstage</text><rect x="12" y="232" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="250" text-anchor="start" class="chartlet-journey-text">Greets the customer and asks for the account</text><text x="19" y="278" text-anchor="start" class="chartlet-journey-line-label">Line of visibility</text><line x1="12" y1="285" x2="368" y2="285" class="chartlet-journey-line"/><text x="19" y="303" text-anchor="start" class="chartlet-journey-row">Backstage</text><rect x="12" y="308" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="326" text-anchor="start" class="chartlet-journey-text">Routes the chat by product and language</text><text x="19" y="353" text-anchor="start" class="chartlet-journey-row">Support</text><rect x="12" y="358" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="376" text-anchor="start" class="chartlet-journey-text">Chat platform, customer database</text><rect x="12" y="404" width="356" height="28" class="chartlet-journey-stage"/><text x="19" y="422" text-anchor="start" class="chartlet-journey-stage-text">Solve</text><text x="19" y="449" text-anchor="start" class="chartlet-journey-row">Actions</text><rect x="12" y="454" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="472" text-anchor="start" class="chartlet-journey-text">Follows the steps</text><text x="19" y="499" text-anchor="start" class="chartlet-journey-row">Touchpoints</text><rect x="12" y="504" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="522" text-anchor="start" class="chartlet-journey-text">Chat, email</text><text x="19" y="549" text-anchor="start" class="chartlet-journey-row">Sentiment</text><rect x="19" y="556" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="39" y="556" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="59" y="556" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="79" y="556" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="99" y="556" width="16" height="14" class="chartlet-journey-step"/><text x="127" y="568" text-anchor="start" class="chartlet-journey-value">+1</text><text x="19" y="594" text-anchor="start" class="chartlet-journey-line-label">Line of interaction</text><line x1="12" y1="601" x2="368" y2="601" class="chartlet-journey-line"/><text x="19" y="619" text-anchor="start" class="chartlet-journey-row">Frontstage</text><rect x="12" y="624" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="642" text-anchor="start" class="chartlet-journey-text">Sends the steps and checks that they worked</text><text x="19" y="670" text-anchor="start" class="chartlet-journey-line-label">Line of visibility</text><line x1="12" y1="677" x2="368" y2="677" class="chartlet-journey-line"/><text x="19" y="695" text-anchor="start" class="chartlet-journey-row">Backstage</text><rect x="12" y="700" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="718" text-anchor="start" class="chartlet-journey-text">Files a bug when the cause is the product</text><text x="19" y="745" text-anchor="start" class="chartlet-journey-row">Support</text><rect x="12" y="750" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="768" text-anchor="start" class="chartlet-journey-text">Knowledge base, issue tracker</text><rect x="12" y="796" width="356" height="28" class="chartlet-journey-stage"/><text x="19" y="814" text-anchor="start" class="chartlet-journey-stage-text">Close</text><text x="19" y="841" text-anchor="start" class="chartlet-journey-row">Actions</text><rect x="12" y="846" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="864" text-anchor="start" class="chartlet-journey-text">Rates the conversation</text><text x="19" y="891" text-anchor="start" class="chartlet-journey-row">Touchpoints</text><rect x="12" y="896" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="914" text-anchor="start" class="chartlet-journey-text">Email survey</text><text x="19" y="941" text-anchor="start" class="chartlet-journey-row">Sentiment</text><rect x="19" y="948" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="39" y="948" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="59" y="948" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="79" y="948" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><rect x="99" y="948" width="16" height="14" class="chartlet-journey-step chartlet-journey-step-on"/><text x="127" y="960" text-anchor="start" class="chartlet-journey-value">+2</text><text x="19" y="986" text-anchor="start" class="chartlet-journey-line-label">Line of interaction</text><line x1="12" y1="993" x2="368" y2="993" class="chartlet-journey-line"/><text x="19" y="1011" text-anchor="start" class="chartlet-journey-row">Frontstage</text><rect x="12" y="1016" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="1034" text-anchor="start" class="chartlet-journey-text">Thanks the customer and closes the chat</text><text x="19" y="1062" text-anchor="start" class="chartlet-journey-line-label">Line of visibility</text><line x1="12" y1="1069" x2="368" y2="1069" class="chartlet-journey-line"/><text x="19" y="1087" text-anchor="start" class="chartlet-journey-row">Backstage</text><rect x="12" y="1092" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="1110" text-anchor="start" class="chartlet-journey-text">Tags the conversation, updates the article</text><text x="19" y="1137" text-anchor="start" class="chartlet-journey-row">Support</text><rect x="12" y="1142" width="356" height="28" class="chartlet-journey-cell"/><text x="19" y="1160" text-anchor="start" class="chartlet-journey-text">Survey tool, knowledge base</text></svg></div><p class="chartlet-source">Source: Illustrative blueprint of a software subscription&#39;s support</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Service blueprint of a support request</caption><thead><tr><th scope="col">Stage</th><th scope="col">Actions</th><th scope="col">Touchpoints</th><th scope="col">Sentiment</th><th scope="col">Frontstage</th><th scope="col">Backstage</th><th scope="col">Support</th></tr></thead><tbody><tr><th scope="row">Ask</th><td>Opens a chat and describes the problem</td><td>Chat widget</td><td>-1</td><td>Greets the customer and asks for the account</td><td>Routes the chat by product and language</td><td>Chat platform, customer database</td></tr><tr><th scope="row">Solve</th><td>Follows the steps</td><td>Chat, email</td><td>+1</td><td>Sends the steps and checks that they worked</td><td>Files a bug when the cause is the product</td><td>Knowledge base, issue tracker</td></tr><tr><th scope="row">Close</th><td>Rates the conversation</td><td>Email survey</td><td>+2</td><td>Thanks the customer and closes the chat</td><td>Tags the conversation, updates the article</td><td>Survey tool, knowledge base</td></tr></tbody></table></details></figure></div>