BookStack Code Mirror - hacks/blob - content/interactive-drawings/index.md

   1 +++
   2 title = "Interactive Embedded Page Drawings"
   3 author = "@ssddanbrown"
   4 date = 2025-06-22T00:00:00Z
   5 updated = 2025-06-22T00:00:00Z
   6 tested = "v25.05.1"
   7 +++
   8
   9 This hack will, on page view, attempt to convert any drawing images into interactive embedded drawing viewers so that you'll be able to pan & zoom around the drawings while also being able to interact with things like links within the drawings.
  10
  11 #### Considerations
  12
  13 - The drawings are loaded via the external "https://viewer.diagrams.net" site/service, and therefore this relies on that service being accessible from the browser, and drawing data is sent to that domain/location.
  14 - This hack will dynamically alter the `ALLOWED_IFRAME_SOURCES` option to allow the needed embedded viewers.
  15 - The embedded viewers will take up more space than the original drawing, as extra room is needed for the viewer toolbar/UI. This may result in extra page movement/jumping on page load.
  16 - While this has been tested with some drawings, this isn't built on public/strong standards & APIs so there may be cases where this does not work, and there's no assurance this will continue to work in the future.
  17
  18 #### Usage
  19
  20 After setup of the required hack files, this should automatically convert drawings when viewing a page.
  21
  22 #### Code
  23
  24 {{<hack file="layouts/parts/base-body-start.blade.php" type="visual">}}
  25 {{<hack file="functions.php" type="logical">}}