Diagram Integration

Add visual content to enhance your questions

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

How to use:

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

How to use:

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

How to use:

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

How to use:

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 vendor dashboard allows you to:

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

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

Need help with diagrams?

We're here to assist

Question Creation Vendor Guide