JoTkr Help Guide

What is JoTkr Diagram Generator?

JoTkr Diagram Generator is a powerful tool that allows you to create and visualize diagrams using natural language or Mermaid syntax. Whether you need a flowchart, sequence diagram, class diagram, or other types of visual representations, JoTkr can generate them for you with simple text descriptions or direct Mermaid code.

How to Use

Method 1: Natural Language Generation

  1. Describe your diagram in plain English. For example: "Create a flowchart showing the user registration process with email verification"
  2. Hit Send or press Enter (without Shift)
  3. The AI will generate a Mermaid diagram based on your description
  4. You can view the diagram in the Preview tab or see the code in the Code tab
  5. You can save the diagram as a PNG image by clicking the download button in the top-right corner of the diagram

Method 2: Direct Mermaid Code

  1. Write your Mermaid syntax directly in the input box
  2. The system will detect Mermaid code and render it immediately without AI processing
  3. This method is useful if you already know Mermaid syntax or want to fine-tune a generated diagram

Diagram Types You Can Create

Flowcharts

For visualizing processes or workflows with decision points.

flowchart TD
    A[Start] --> B{Is user registered?}
    B -->|Yes| C[Login]
    B -->|No| D[Register]
    C --> E[Dashboard]
    D --> E

Sequence Diagrams

For showing interactions between objects over time.

sequenceDiagram
    User->>Server: Authentication Request
    Server->>Database: Validate Credentials
    Database-->>Server: Validation Result
    Server-->>User: Authentication Response

Entity Relationship Diagrams

For modeling database structures and relationships.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

Class Diagrams

For modeling object-oriented structures and relationships.

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    Animal <|-- Dog

State Diagrams

For representing different states of a system.

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Submit
    Processing --> Success: Valid
    Processing --> Error: Invalid
    Success --> [*]
    Error --> Idle: Retry

Tips for Better Results

  • Be specific in your descriptions. The more details you provide, the better the diagram will match your expectations.
  • Refine gradually. Start with a basic diagram, then ask for specific improvements.
  • Learn Mermaid syntax for precise control. The Code tab shows you the Mermaid code, which you can modify directly.
  • Use context. The AI remembers your conversation, so you can refer to previous diagrams when requesting improvements.
  • Download your diagrams using the download button that appears when you hover over a diagram.

Additional Resources