Use image fence plugin to display Image and manually provide badge coordinates ```image testingisdocumenting.png {scale: 0.5} 840,600 1680,1400 ``` Note: Color of badges change based on the background color

Hover mouse over image during introduction/getting-started#preview-mode Preview Mode to display coordinates under the cursor. Use the displayed coordinates to update the position.

Put ordered list right before or after an annotated image to associate text with the badges. markdown 1. Use automated testing to exercise happy paths and capture test artifacts 2. Use captured test artifacts to supercharge your documentation ```image testingisdocumenting.png {scale: 0.5} 840,600 1680,1400 ``` Note: Hover over image annotations to display automatic tooltip. Hover over an item text to highlight the annotation on the image.Use automated testing to exercise happy paths and capture test artifacts Use captured test artifacts to supercharge your documentation

Use pixelRatio to display HiDPI images and use logical coordinates for the annotations ```image testingisdocumenting.png {pixelRatio: 2} 420,300 840,700 ```

Use rect and arrow as first column value to render arrow or rectangle annotation ```image testingisdocumenting.png {pixelRatio: 2} rect,60,110,420,430 arrow,485,810,310,474 ``` Add a text block after coordinates to provide tooltip data. Markdown is supported. ```image testingisdocumenting.png {pixelRatio: 2} rect,60,110,420,430,Note: zone description arrow,485,810,310,474,destination **description** ``` Note: Hover over image annotations to display automatic tooltip.

:include-image: testingisdocumenting.png { annotationsPath: "testingisdocumenting.csv", pixelRatio: 2, } rect,60,110,420,430,Note: zone description arrow,485,810,310,474,destination **description** include-image also supports JSON file format

You don't need to specify annotations path, if annotations file matches file name and path of the image and has json or csv extension.Add annotate: true to automatically use matching annotations file :include-image: testingisdocumenting.png { annotate: true, pixelRatio: 2, }

Use UI testing frameworks to automatically generate annotations file and capture screenshot.For example https://github.com/testingisdocumenting/webtau WebTau automatically generates an annotations file in addition to capturing a screenshot. package webtauexamples import static org.testingisdocumenting.webtau.WebTauGroovyDsl.* def homeSearchInput = $('input[id*="search"]') def resultSearchInput = $("#search_form_input") def result = $('article[data-testid="result"]') scenario("capture screenshot") { browser.open("https://duckduckgo.com/") homeSearchInput.waitToBe visible homeSearchInput.setValue("testing is documenting") homeSearchInput.sendKeys(browser.keys.enter) result.waitTo visible browser.doc.withAnnotations(resultSearchInput, result) .capture("duckduckgo-search") } :include-image: doc-artifacts/duckduckgo-search.png {annotate: true} Type question you want to be answered anonymously Scan through results and pick the most relevant one Note: https://github.com/testingisdocumenting/webtau WebTau captures additional data such as pixelRatio

Annotated images automatically participate in presentation mode. Annotations will appear one by one.