Animated diagram/schema inside a slide

[stephanedaviet]

I would like to have an animated diagram inside a slide, something to describe a step by step workflow. The diagram is in SVG format. In the past, I have successfully done this kind of thing with RevealJS and some specific JS to manipulate the SVG, but with Marp, I don't know how to achieve the same effect. Thanks in advance.

[yhatt]

Unlike reveal.js, Marp is mainly targeted to the static slide such as a PDF slide. Optional animations for each rendered elements, that are triggered when appearing a slide page in HTML, can set through CSS, but detailed animations that are triggered from fragment navigations within a single page are out of the scope of Marp ecosystem.

If you want more interactive slides, using suitable tool for the your purpose is the best.

---

In Marp, you can animate elements rendered by Markdown through inline style <style>, or embed SVG image that has predeclared animations.

A following example is presenting animated steps. It must be required to enable raw HTML tag rendering in Markdown by the preference (--html option in Marp CLI, and extension settings in Marp for VS Code). You should use this option at your own risk due to insecure.

# Animated SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 300" width="100" height="300">
  <path class="stroke step1" d="M10 76.79l53.57-53.58v53.58H10z"></path>
  <path class="stroke step2" d="M10 176.79l53.57-53.58v53.58H10z"></path>
  <path class="stroke step3" d="M10 276.79l53.57-53.58v53.58H10z"></path>
  <defs>
    <style>
      .stroke {
        fill: none;
        stroke: #0288d1;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 5px;
      }
      .step1, .step2, .step3 {
        stroke-dasharray: 183 185;
        stroke-dashoffset: 184;
        animation: animated-stroke 1s linear 1 both;
      }
      .step2 {
        animation-delay: 1.5s;
      }
      .step3 {
        animation-delay: 3s;
      }
      @keyframes animated-stroke {
        to { stroke-dashoffset: 0; }
      }
    </style>
  </defs>
</svg>

(Required to enable HTML in Markdown)

You can also use an external SVG image ![](step-image.svg) that is including pre-declared animations instead. But in that case, SVG will not restart animation from beginning when navigated slide page.

[stephanedaviet]

OK, thanks for the insights. Marp is really a plus compared to RevealJS for its simplicity specially. Getting some animation in the HTML presentation mode doesn't seem incompatible to me with producing static slides, but I fully understand that, as the core maintainer, you get some strong guidelines driving the roadmap of Marp, which is still great with or without animations!

[Aightech]

Hi there,
Similar to @stephanedaviet , i was looking for a way to display SVG diagram.
It is a bit drafty but here the solution i came up with :

• create a diagram with N layers (for example with with drawio ) called "diag.svg"
• use a custom python script to generate N svg file saved near the original file (diag_layers/diag_l1.svg etc)
• in a marp md file use html tag to create a <img src="diag.svg" id="diag">
• right after call a custom js function animate(n, diag) which will replace the img div by N <img src="diag_layers/diag_li" data-marpit-fragment=i style="cenering style">
• like for fragmented bullet point, the layers are then displayed one after the other creating the "animation"

here the snipet of my workaround:

1. Js script at the beginning of the marp file

function animate(n, id) {
      var element = document.getElementById(id);
      var src = element.src;  
      var path = src.substring(0,src.lastIndexOf("/"));
      var src_base = src.substring(src.lastIndexOf("/")+1,src.indexOf("."));
      var src_ext = src.substring(src.indexOf(".")+1);
      console.log(path + " " + src_base + " " + src_ext);
      var parent = element.parentElement;
      var i;
      var folder = src_base + "."+src_ext + "_layers/";
      for (i = 0; i < n; i++) {
        var img = document.createElement("img");
        img.src = path + "/"+ folder + src_base + "_l" + i + "." + src_ext;
        console.log(img.src);
        img.style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%;";
        img.setAttribute("data-marpit-fragment", i);
        parent.appendChild(img);
      }
      parent.removeChild(element);
    }

2. The htm tag to insert an animated img

<img src="test.svg" id="test"/>
<script> animate(5, "test") </script>

3. The python function scrapping the svg file's layers

def extract_layers(svg_path, output_dir):
    # Parse the SVG file
    tree = ET.parse(svg_path)
    root = tree.getroot()
    # Namespace dictionary to handle SVG namespace
    namespaces = {'svg': 'http://www.w3.org/2000/svg'}
    etree.register_namespace("","http://www.w3.org/2000/svg")

    # Find the structure of the SVG file (layers are usually grouped under a g element)
    layers = root.findall('.//svg:g', namespaces)
    layers = layers[1]
    layers.remove(layers[0]) # remove the background
    
    # Ensure the output directory exists
    os.makedirs(output_dir, exist_ok=True)

    # Extract and save each layer
    for i, layer in enumerate(layers):
        # print(layer.tag, layer.attrib)
        layer_tree = ET.ElementTree(layer)
        filename_base = os.path.splitext(os.path.basename(svg_path))[0]
        filename_base = np.array(filename_base.split('.'))
        arr = []
        arr.append(filename_base[0])
        for j in range(1, len(filename_base)):
            arr.append('.' + filename_base[j])
        filename_base = np.array(arr)
        name = filename_base[0] + '_l' + str(i) + "".join(filename_base[1:]) + '.svg'
        print(name)
        layer_path = os.path.join(output_dir, name)

        # Create a new SVG root element for the layer
        new_root = ET.Element('svg', root.attrib)
        new_root.append(layer)
        layer_tree._setroot(new_root)

        # Write the layer to a new SVG file
        layer_tree.write(layer_path)

Right now i have a vscode task scrapping the marp file for animated img, to generate the svg file for each layer before exporting the slide deck. there is probably a more elegant way to do though.