3

I'm working on code diff view design, and would like to gather your opinion on two existing patterns.

Below are screenshots of two different side-by-side diff view designs.

One is leaving white space for code that didn't exit in the old version (on the left), and the line numbers don't continue. Scroll-aligned code diff view

The other design is similar to sankey diagram where the white spaces are removed on the left side, you can see lines of code in its original flow. Sankey diagram-like code diff view

Which design do you prefer and why?

Improve this question
2
  • The first style is ok too, but is missing the indicators for a absent lines. WinDiff for example shows dark gray lines where the file has no equivalent line.
    – scunliffe
    Commented Aug 19, 2017 at 12:36
  • I know it's been a while, but does anyone have a link to this tool or something similar?
    – Akash K Roy
    Commented Aug 16, 2021 at 20:06

1 Answer 1

Reset to default
3

I personally prefer the 2nd one.

Why?

  • For the simple reason that it shows me both the states as-is.

If one version has one 20 lines of code then I see it altogether rather than it being dependent on the other version which might have say 1000 lines. Imagine having to scroll through 1000 lines of code on one side just to reach line 2 on the other side!

  • I like the added and removed code highlighting. It's cleaner and only highlights the relevant code rather than the whole line.

  • It makes code comparison easier when comparing more than 2 versions (see the screenshot below)

Alignment of more versions is easier with the Sankey-style lines Code diff with more than 2 code versions

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.