Report A Bug: Draw.io

by Editorial Team 22 views
Iklan Headers

Hey guys,

So, you've stumbled upon a bug in draw.io? No worries, let's get this sorted out! This template is here to help you report it in a way that makes it super easy for the developers to understand and fix. Just follow the steps, and we'll have draw.io running smoothly in no time!

Preflight Checklist

Before we dive into the bug report, make sure you've ticked off these boxes:

  • [ ] I agree to follow the Code of Conduct that this project adheres to.
  • [ ] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

It's important to search the issue tracker and agree to the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.

If you are technical, you should report bugs along the lines of https://marker.io/blog/how-to-write-bug-report. If you are not technical, we will make allowances, please try to make an effort to understand the process.

Describing the Bug

Okay, let's get to the heart of the matter. The most important part of reporting a bug is a clear, concise, and detailed explanation of what exactly went wrong. Imagine you're explaining it to someone who has never used draw.io before. Spell it out!

  • Be Specific: Instead of saying "it crashed," describe exactly what you were doing when it crashed. What tool were you using? What element were you editing? What steps did you take right before the crash?
  • Avoid Assumptions: Don't assume the developers know what you mean. If a specific button wasn't working, name the button and where it's located in the interface. If a connection line disappeared, describe the type of line and the elements it connected.
  • One Bug Per Report: If you've found multiple bugs, great! But please submit them as separate reports. This makes it much easier to track and fix each issue individually.
  • Use Proper Grammar and Spelling: This might seem trivial, but well-written bug reports are easier to understand. Developers are more likely to take your report seriously if it's clear and professional.

For example, instead of saying "The thingy broke," try something like: "When I attempt to move a dashed connection line between two rectangle shapes using the 'Select' tool, the line disappears from the canvas."

Steps to Reproduce

This is where you guide the developers through the exact steps that lead to the bug. Think of it as creating a recipe for disaster, but in a helpful way!

  1. Start from the Beginning: Don't assume the developers know where you are in the process. Begin with the initial state. For example, "Open a new, blank diagram" or "Open an existing diagram with several shapes."
  2. Be Precise: List each action you take, one step at a time. Include every click, every menu selection, every text entry. The more detail, the better.
  3. Number Your Steps: This makes it easier to follow along. Start with "1. Go to...", "2. Click on...", "3. Scroll down to...", and so on.
  4. Test Your Steps: Before submitting your report, try following your own steps in a fresh draw.io instance. This ensures that your steps are accurate and complete.

For instance:

  1. Go to "draw.io" in your web browser.
  2. Create a new diagram.
  3. Add two rectangle shapes to the canvas.
  4. Use the "Connection" tool to draw a dashed line between the two rectangles.
  5. Select the "Select" tool.
  6. Click and drag one of the rectangles to move it.
  7. Observe that the dashed connection line disappears.

Expected Behavior

Here, you describe what should have happened if the bug wasn't present. This helps the developers understand the intended functionality and verify that their fix resolves the issue correctly.

  • Be Clear and Concise: Briefly explain the expected outcome in a straightforward manner.
  • Focus on the Result: Describe the end result of the action, not the process.
  • Avoid Ambiguity: Use precise language to avoid any confusion.

For example: "The dashed connection line should remain visible and connected to the rectangles as one of the rectangles is moved."

Screenshots

A picture is worth a thousand words, especially when it comes to bug reports. Screenshots can visually demonstrate the issue, making it easier for developers to understand the problem.

  • Highlight the Issue: Use annotation tools to draw attention to the specific area of the screen where the bug is occurring. Arrows, circles, and text callouts can be very helpful.
  • Before and After: If possible, include screenshots showing the state of the application before and after the bug occurs. This can help illustrate the change that resulted from the bug.
  • Full Screen vs. Partial Screen: In most cases, a partial screenshot that focuses on the relevant area is sufficient. However, in some cases, a full-screen screenshot may be necessary to provide context.
  • Keep it Relevant: Only include screenshots that are directly related to the bug being reported. Avoid including unnecessary images.

draw.io Version

This is crucial information! The draw.io version helps developers pinpoint the exact code that's causing the problem. You can find this in the Help -> About menu of the draw.io editor. Just copy and paste the version number here, like this:

draw.io version x.y.z

Desktop Information

If you're experiencing the bug on a desktop computer, please provide the following details:

  • Operating System (OS): Specify the operating system you're using (e.g., Windows 10, macOS Monterey, Ubuntu 20.04).
  • Browser: Indicate which browser you're using (e.g., Chrome, Safari, Firefox, Edge).
  • Browser Version: Provide the version number of your browser (e.g., Chrome 92.0.4515.159).

For example:

  • OS: macOS Monterey
  • Browser: Chrome
  • Browser Version: 92.0.4515.159

Smartphone Information

If the bug occurs on a smartphone or tablet, please provide the following information:

  • Device: Specify the device model (e.g., iPhone 12, Samsung Galaxy S21, iPad Air).
  • Operating System (OS): Indicate the operating system and version (e.g., iOS 15.0, Android 11).
  • Browser: Specify the browser you're using (e.g., Safari, Chrome, Firefox).
  • Browser Version: Provide the version number of the browser.

For example:

  • Device: iPhone 12
  • OS: iOS 15.0
  • Browser: Safari
  • Browser Version: 15.0

Incognito/Private Mode Test

Sometimes, browser extensions can interfere with draw.io and cause unexpected behavior. To rule out this possibility, please test the problem in incognito/private mode with all browser extensions switched off. Then, simply write "yes" or "no" below to indicate whether you've done this:

yes or no

Additional Context

Finally, use this section to provide any additional information that might be helpful in understanding and resolving the bug. This could include:

  • Frequency: How often does the bug occur? Is it consistent, or does it happen only sometimes?
  • Workarounds: Have you found any temporary solutions or workarounds to avoid the bug?
  • Specific Files: If the bug is related to a specific diagram file, consider attaching the file to the report (if possible and if it doesn't contain sensitive information).
  • Anything Else: Any other details that you think might be relevant.

By providing as much context as possible, you'll help the developers quickly identify the root cause of the bug and implement a fix.

Thanks for helping make draw.io better!