Visualization with AI: support for teaching and science

Artificial intelligence (AI) can support the visualization of content - for example, when creating mind maps, flowcharts or structural overviews. This opens up new possibilities for teaching, presentations or concept development. At the same time, it is important to know where the limits of such tools lie.

What AI can do for visualization

AI models generate initial drafts for visual representations with just a few text instructions (known as prompts). This can be helpful for preparing complex topics for students or structuring ideas in a team. The representation of standardized, stereotypical content works particularly well.

However, the results are usually static image files that cannot be edited. Targeted adaptation via new prompts also often only works to a limited extent. What's more, image-generating AI use requires a lot of computing power - and therefore also consumes energy.

Visualization by code with Mermaid

A sensible approach is the combination of AI support and so-called vibe coding, e.g. with mermaid code. Mermaid code is a simple text language that can be used to describe diagrams - such as mind maps or flowcharts - in a structured form. An AI prompt does not produce a finished image, but a block of text that represents the content and its relationships as code.

This code can then be entered directly on the mermaid.live platform. Not only can you check whether the code is correct, there are also numerous examples and diagram types available to help you get started. The visualization appears immediately as a graphic and can be adapted as required.

Alternatively, the Mermaid code can also be imported into the free Draw.io program (link to instructions:https://www.drawio.com/blog/diagrams-from-code ). There it can be graphically edited, supplemented or integrated into existing diagrams.

Advantages:

  • The visualization can be subsequently edited.
  • Structures can be easily changed or extended.
  • The code can be integrated into teaching materials, websites or presentations.

A simple example:

  1. Think about what content you want to structure and formulate it as clearly as possible in one sentence:

    "Using Mermaid Code, create me a mind map with the contents: Advantages and disadvantages of AI in visualization; Advantages: Time saving, quick structure, simple presentation, code-based editable; Disadvantages: limited customizability, lack of control, high energy consumption, quality issues."
     
  2. Use Copilot or a similar text model to generate the appropriate Mermaid code.
    mindmap

      root((AI in the visualization))

        Advantages

          Time saving

          Fast structure

          Simple presentation

          Code-based editable

        Disadvantages

          Limited customizability

          Lack of control

          High energy consumption

          Quality problems
     

  3. Copy the code into a tool such as mermaid.live or draw.io (Arrange < Paste < Mermaid) to see the mind map as a graphic. Here you can also edit the code directly and export the result as SVG or PNG.

Additional tip: Integrate into your prompt that the AI should include emojis in the result for better visualization.

AI can effectively facilitate the visualization of content, especially if the results can be edited flexibly by using text-based formats such as Mermaid.

A considered approach remains important: not all content can be visualized automatically in a meaningful way, and the use of AI is always associated with a certain consumption of resources. If these aspects are taken into account, AI-based visualization can be used profitably - for example for brainstorming, structuring or didactic preparation of complex topics.