Diagram Integration

Add visual content to enhance your questions

In this guide

Visual Learning

Visual content significantly improves learning outcomes. BlitzGrok supports multiple ways to add diagrams and images to your questions:

SVG files for static images
Inline SVG for embedded graphics
BlitzDiagrams for interactive, dynamic diagrams
Python functions for programmatic generation

Diagram Types

SVG Files

Best for: Static images, illustrations, pre-made diagrams

Upload your SVG file to the resources section
Reference the file path in the question's model field
File will be loaded and displayed automatically

diagram.svg

Inline SVG

Best for: Simple shapes, custom graphics, embedded content

Write SVG code directly in the model field
Must start with <svg
Content is used as-is in the question

<svg width="200" height="100">...</svg>

BlitzDiagrams JSON

Best for: Dynamic diagrams, variable-based visuals, complex layouts

Create diagram JSON with width, height, and elements
Use variables from your question context
Diagram renders dynamically based on variable values

                            { "width": 400, "height": 300, "elements": [...] }
                        

See existing DIAGRAM_GUIDE.md for detailed BlitzDiagrams documentation.

Python Function Path

Best for: Complex generation logic, programmatic creation

Create a Python function that generates diagram JSON
Reference the function path in the model field
Function receives question variables as context

module.function_name

Variable Integration

The power of diagrams in BlitzGrok is their ability to use question variables. This means your diagrams can change based on the question instance.

Example: Dynamic Line Length

Question Variables

length = randint(5, 15)

BlitzDiagrams JSON

{
  "width": 400,
  "height": 200,
  "elements": [
    {
      "type": "line",
      "x1": 50,
      "y1": 100,
      "x2": "50 + length * 20",
      "y2": 100,
      "label": "{length} units"
    }
  ]
}

Best Practices

Keep it simple — Don't overcomplicate diagrams
Use appropriate sizes — Ensure diagrams fit on mobile screens
Label clearly — Add text to explain diagram elements
Test variables — Ensure diagrams work with all variable combinations
Optimize performance — Complex diagrams can slow question generation
Consider accessibility — Provide text alternatives when possible

Resource Management

The Resources section in your Educator dashboard allows you to:

Upload and manage SVG files
Create diagram collections
Build reusable diagram models
Organize visual content

Access resources from your Educator workspace to start building your visual content library.

Need help with diagrams?

We're here to assist