For CS, IT and system-design courses

    Grade diagrams, not file uploads.

    Diagrammable turns schema and system-design tasks into interactive assignments inside Moodle and WordPress LMS. Students complete diagrams in the browser; you review every submission from one dashboard and cut grading time in half.

    No credit card required - Moodle, LearnDash, TutorLMS, LifterLMS

    Diagrammable Assignment
    Diagrammable logo
    Database Schema Assignment
    CS 201 • Due Mar 15, 2025
    Active
    Customers🔑 customer_id name emailOrders🔑 order_id🔗 customer_id total1NOrder_Items🔗 order_id, product_id
    Normalize Customer/Orders Schema
    80 submissions

    The problem with diagrams in courses

    Traditional diagram assignments force instructors into tedious workflows that don't scale.

    Grading JPEG/PDF uploads is slow and painful

    Downloading, opening, and annotating image files wastes hours.

    Instructors only see final images, not structure

    No insight into student thinking or workflow.

    Text assignments are trivial to outsource to AI

    Diagrams require understanding, not just prompting.

    Solution

    Diagrammable turns diagrams into real assignments, not attachments.

    Students work directly in the browser. You see every submission in one dashboard. No downloads. No file chaos. Just grading.

    Module 1: Template Library / Curriculum Pack v1

    Start from ready-made diagram templates.

    Pick from database and systems templates like "Normalize this customer/orders schema" or "Add a caching layer." No blank editors. No starting from scratch.

    Databases
    Intermediate

    Normalize Customer/Orders Schema

    Customers🔑 customer_id name emailOrders🔑 order_id🔗 customer_id total1N
    Systems
    Advanced

    Add Caching Layer

    ClientCacheDB?
    Databases
    Beginner

    Design E-commerce DB

    Products🔑 product_id name, priceOrders🔑 order_id🔗 user_idUsers🔑 user_id+ Order_Items junction table
    Systems
    Advanced

    Microservices Architecture

    GatewayAuthOrdersPayment
    Systems
    Intermediate

    User Authentication Flow

    UserLoginVerifyDB?
    Databases
    Beginner

    Library Management DB

    Books🔑 book_id title, authorMembers🔑 member_id nameLoans🔗 book_id, member_id

    32 templates across databases, systems design, and networking • More added weekly

    Module 2: Assignment Builder (Moodle / WordPress LMS plugin)

    Add a Diagrammable assignment to your course.

    Choose a template, set points and a due date, and publish – all inside the LMS you already use.

    Moodle Lesson Editor
    Introduction text block
    LC
    Diagrammable Assignment
    Template: Normalize Customer/Orders Schema
    Follow-up instructions

    Assignment Settings

    Normalize Customer/Orders Schema
    100
    Mar 15, 2025
    Diagram preview

    One-click embed. Diagrammable appears as a native assignment type in your course editor.

    Module 3: Student Diagram Editor (Student-Copy workflow)

    Students complete diagrams directly in the browser.

    Each student gets their own Student-Copy of the template, with only the relevant nodes and edges editable. Changes auto-save; submission locks the diagram.

    Student View: Database Schema Assignment
    Auto-saved 2s ago
    TABLE (editable)
    Customers
    • customer_id
    • name
    • email
    TABLE (editable)
    Orders
    • order_id
    • customer_id
    • total
    LOCKED
    Reference Data
    Pre-configured
    Teal borders = editable • Grey = locked template elements
    Student View: Database Schema Assignment
    Submitted

    Assignment submitted. Diagram is now read-only.

    Student-Copy Workflow

    Each student receives a personal copy of the template via POST /studentCopies. Changes are auto-saved to their copy. Instructors only see submitted final diagrams.

    Module 4: Teacher Dashboard

    Review all submissions from one dashboard.

    See every student diagram for an assignment in a single list. Open, comment, grade, and export CSV/PNGs – no more download/open/annotate/upload loops.

    Database Schema Assignment

    CS 201 • Due March 15, 2025

    StudentStatusLast ActivityTime SpentGradeActions
    MC
    Maya Chen
    Submitted
    2h ago
    18m
    AK
    Alex Kumar
    Submitted
    5h ago
    24m
    95
    JL
    Jordan Lee
    In Progress
    1h ago
    12m
    SR
    Sam Rivera
    Submitted
    3h ago
    7s
    RP
    Riley Park
    Submitted
    4h ago
    31m
    88
    5 of 80 submissions shown

    Single Submission View

    The student's diagram will be visible here.

    Module 5: Integrity & Analytics (v1.2)

    Built to support integrity, not just grading.

    Diagrammable surfaces basic similarity and timing signals so you can focus your attention where it matters.

    Submissions Over Time

    MonTueWedThuFriSat

    Average Time Spent

    23 minutes

    Across 80 submissions

    Flagged for Review

    5

    submissions need attention

    Completed too quickly

    3 students completed in under 10 seconds

    Sam RiveraTaylor KimJamie Wu
    High similarity detected

    2 diagrams are highly similar to others

    Alex KumarJordan Lee

    These are basic signals, not accusations. Use them to guide your review workflow.

    Diagrammable Docs

    Keep your WordPress diagrams in sync with Git.

    Diagrammable Docs connects your Mermaid files in GitHub to your WordPress pages. Update the diagram in the repo; your docs follow automatically – with pinned commit SHAs and no broken embeds.

    GitHub Repository
    diagrams/payment-flow.mmd
    graph TD
    A[User] --> B[Gateway]
    B --> C[Processor]
    3f9a7c9
    Latest commit
    Webhook Trigger
    Auto-render on push
    WordPress Editor
    Diagrammable Diagram (Git-synced)
    Rendered diagram SVG
    Synced from docs/payment-flow.mmd @ 3f9a7c9

    Never log into WP to "fix a screenshot" again.

    Source of truth stays in Git. Your docs stay accurate. Perfect for DevRel teams, engineering docs, and agencies managing technical content.

    Join Docs Early Access

    Try Diagrammable with your next cohort.

    Set up your first diagram assignment in under 15 minutes and see all submissions in one dashboard.

    No credit card required
    Works with your LMS
    Ready in 15 minutes