markdown-blockdiag icon indicating copy to clipboard operation
markdown-blockdiag copied to clipboard

Fix background images not rendering due to network access timing

Open Copilot opened this issue 4 months ago • 0 comments

Background images and icons specified via URLs in blockdiag diagrams fail to render when network access is restricted at blockdiag's render phase (common in CI/CD, containers, offline builds). The blockdiag library fetches remote resources during rendering, after markdown processing.

Changes

Pre-fetch remote images during markdown processing

  • Added prefetch_remote_images() to download and cache URL-based background and icon attributes before blockdiag rendering
  • Replaces URLs with temporary file paths in diagram text
  • Falls back to original URL on fetch failure (10s timeout, 10MB limit)
  • Configuration: fetch_remote_images: true (default)

Fix Markdown 3.x API compatibility

  • Updated extendMarkdown() signature: md_globals parameter now optional
  • Changed blockprocessors.add()blockprocessors.register()

Cache management

  • clear_image_cache() removes temporary files
  • Content-Length validation prevents oversized downloads
  • Proper file extension extraction from URLs

Usage

markdown_extensions:
  - markdown_blockdiag:
      format: svg
      fetch_remote_images: true  # pre-fetch remote images
blockdiag {
    F [label = "", background = "http://example.com/logo.gif"];  # now works
    G [icon = "/local/icon.png"];  # local paths unchanged
}

See examples/background_images.md for troubleshooting guide.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • blockdiag.com
    • Triggering command: python3 /tmp/test_bg3.py (dns block)
    • Triggering command: python3 (dns block)
  • example.com
    • Triggering command: python3 /tmp/test_prefetch2.py (dns block)
    • Triggering command: python setup.py test -q (dns block)
    • Triggering command: python setup.py test (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>Background images not working</issue_title> <issue_description>Within the example from http://blockdiag.com/en/blockdiag/examples.html works but not the background images.

<!-- prettier-ignore -->
blockdiag {
   // Set boder-style, backgroun-color and text-color to nodes.
   A [style = dotted];
   B [style = dashed];
   C [color = pink, style = "3,3,3,3,15,3"]; //dashed_array format style
   D [color = "#888888", textcolor="#FFFFFF"];
   // Set border-style and color to edges.
   A -> B [style = dotted];
   B -> C [style = dashed];
   C -> D [color = "red", style = "3,3,3,3,15,3"]; //dashed_array format style
   // Set numbered-badge to nodes.
   E [numbered = 99];
   // Set background image to nodes (and erase label).
   F [label = "", background = "_static/python-logo.gif"];
   G [label = "", background = "http://blockdiag.com/en/_static/python-logo.gif"];
   H [icon = "_static/help-browser.png"];
   I [icon = "http://blockdiag.com/en/_static/internet-mail.png"];
   // Set arrow direction to edges.
   E -> F [dir = none];
   F -> G [dir = forward];
   G -> H [dir = back];
   H -> I [dir = both];
   // Set width and height to nodes.
   K [width = 192]; // default value is 128
   L [height = 64]; // default value is 40
   // Use thick line
   J -> K [thick]
   K -> L;
}

The output is: Screenshot_20211119_211845

But it should look like: Screenshot_20211119_212152

How can I also get background images included?</issue_description>

Comments on the Issue (you are @copilot in this section)

  • Fixes gisce/markdown-blockdiag#14

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Nov 06 '25 06:11 Copilot