Diagram (maybe HTML) integration possible?

Hey there!

For the past few weeks I am searching for a solution, which lets me implement diagrams (mostly flowcharts and timelines) into Anki, which I create using draw.io.

I am well aware of image occlusion. While this add-on is really powerful, I don’t want to use it for various reasons:
a) mistakes cannot be corrected when reviewing the card. You have to externally change the diagram, create a new png, create a new occluded image, lose your progress and so on.
b) images (especially on the mobile app) don’t adjust to dark mode, which looks kinda crappy
c) images don’t adapt well to screen size changes ( I use Mac and iPhone)
d) file size
e) I just don’t think it ist necessary, to create an image and layer it with colored blocks, when I have the possibility to generate a sleek HTML file containing the diagram.

So you see, I am really interested in a more “native” integration of above mentioned diagrams in Anki. When now adding a new card, I can just do basic text operations like tables, lines and so on, but isn’t it possible to create some hierarchical and “flowcharty” text structure?

Long question short: Is it possible to integrate some kind of HTML code into Anki and then use the {{c1::xxx}} thing with it? Or any other way of getting a diagram-like structure into the editing field in Anki? I read that Anki is based on website architecture, so maybe there is a way…?

Thanks a lot!

Your templates can contain arbitrary HTML, which means that all the layout possibilities used on internet web pages can also be used on your cards.
Just enter a field’s HTML editor with Ctrl+Shift+X, paste your diagram code, and insert clozes like you would in the rich text editor.

5 Likes

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.

6 Likes

The SVG-embed method works for me!

Instruction: “In Draw.io: File” → “Embed” → “SVG” → copy-paste to Anki’s HTML editor → quit the HTML Editor → Diagram is being displayed like an image → mark text and cloze it with {{c1::xxx}} or the […]-Button!

I wish I knew this before occluding approx. 30 flowcharts via Image Occlusion…

Thank you so much!! Have yourself a Merry Christmas!

1 Like