Diagram (maybe HTML) integration possible?

Anki Card Design
3

You can embed diagrams from draw.io as

  • SVG
  • HTML
  • IFrame

IFrame isn’t suitable as it doesn’t allow editing. Inline width and height definitions (and a host of other things) of HTML and SVG embeds will get stripped by Anki’s filters, so embedding those as raw HTML doesn’t seem like a valid option either.

Edit: Just tried to embed an SVG again and it actually works fine now. I think an add-on of mine interfered in my initial testing. So before trying the strategy I described below, which is more complicated, see if it works for you to embed diagrams with “File” → “Embed” → “SVG” → and copy-pasting to Anki’s HTML editor.

Alternative approach using SVG images

I see you can export diagrams as SVG with draw.io, so you could just paste those SVG’s into Anki like regular images and access the HTML document with a script from your template:

<script>
   var imgs = [...document.getElementsByTagName("IMG")].filter(img =>
      /\.svg/.test(img.src)
   );

   // Replace image tag with object tag
   // to allow access to the SVG's contentDocument
   imgs.forEach(img => {
      let svg = document.createElement("object");
      svg.type = "image/svg+xml";
      svg.data = img.src;
      img.after(svg);
      img.remove();
      svg.addEventListener(
         "load",
         () => {
            let svgDoc = svg.contentDocument;
            /* query svgDoc for specific tags, shapes etc. */
         }
      );
   });
</script>

Then one could hide all shapes that have a specific property (e.g. a red background) on the front side of the card and remove that property on the backside so they look normal. This would be quite simple to implement.

Spreading the occlusion over mulitple cards would require adding some extra fields to your notetype and using conditional card creation.

7 Likes