Fix background images not rendering due to network access timing
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-basedbackgroundandiconattributes 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_globalsparameter 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:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)
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:
But it should look like:
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.

