Skip to content

Observability Pipeline images

Hillary Fraley edited this page Nov 22, 2022 · 2 revisions

Observability pipeline images developed as SVGs are displayed on the following pages:

Replace SVGs with PNGs in PDFs

SVGs are not displayed in PDFs, so you must replace the SVG code with the following figure shortcodes before you generate the offline docs PDF. The PNG files are already saved in the static images directory:

{{< figure src="/images/observability-pipeline.png" link="/images/observability-pipeline.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-entities.png" link="/images/observability-pipeline-entities.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-events.png" link="/images/observability-pipeline-events.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-filter.png" link="/images/observability-pipeline-filter.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-process.png" link="/images/observability-pipeline-process.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-schedule.png" link="/images/observability-pipeline-schedule.png" target="_blank" >}}

{{< figure src="/images/observability-pipeline-transform.png" link="/images/observability-pipeline-transform.png" target="_blank" >}}

Lucidchart source links

The images were created using Lucidchart. If you need to adjust the images, here are the Lucidchart links:

Formatting notes

Use green (#B3D971) outline 10px for individual shapes.

Use relative links in images.

Steps to export SVG from Lucidchart

Follow these steps to export the code for an updated SVG image from Lucidchart:

  1. File > Export > SVG
  2. Options: File Format = SVG and Crop = Crop to Content
  3. Click Download
  4. Copy SVG files into sensu-go/static/images
  5. Open SVG files in text editor
  6. Replace width="1380.42" height="404.01" with viewBox="0 0 1400 405" preserveAspectRatio="xMidYMid meet" to scale the SVG to the available space and resize responsively
  7. Replace http:// with / or remove http:// altogether to create relative links
  8. Add code comment just inside the tag that includes the link to the source image in Lucidchart
  9. Save all updates to the SVG file
  10. Copy all code in the SVG file and paste as inline code in the markdown content file where you want the image to appear