How to encode a text diagram into json?

Question

I'm trying to encode the oauth2 diagram as a string in a json object. However when I "decode" it using the builtin js parseJSON function the output looks broken. Any idea why or how should I encode it ?

Plunkr

function show(){
  var diagram = '  +----------+\
     | Resource |\
     |  Owner   |\
     |          |\
     +----------+\
          ^\
          |\
         (B)\
     +----|-----+          Client Identifier     +---------------+\
     |         -+----(A)-- & Redirection URI --->|               |\
     |  User-   |                                | Authorization |\
     |  Agent  -|----(B)-- User authenticates -->|     Server    |\
     |          |                                |               |\
     |          |<---(C)--- Redirection URI ----<|               |\
     |          |          with Access Token     +---------------+\
     |          |            in Fragment\
     |          |                                +---------------+\
     |          |----(D)--- Redirection URI ---->|   Web-Hosted  |\
     |          |          without Fragment      |     Client    |\
     |          |                                |    Resource   |\
     |     (F)  |<---(E)------- Script ---------<|               |\
     |          |                                +---------------+\
     +-|--------+\
       |    |\
      (A)  (G) Access Token\
       |    |\
       ^    v\
     +---------+\
     |         |\
     |  Client |\
     |         |\
     +---------+\
'
  x =  JSON.stringify(diagram)
  document.write(JSON.parse(x));
}

result

+----------+ | Resource | | Owner | | | +----------+ ^ | (B) +----|-----+ Client Identifier +---------------+ | -+----(A)-- & Redirection URI --->| | | User- | | Authorization | | Agent -|----(B)-- User authenticates -->| Server | | | | | | |<---(C)--- Redirection URI ----<| | | | with Access Token +---------------+ | | in Fragment | | +---------------+ | |----(D)--- Redirection URI ---->| Web-Hosted | | | without Fragment | Client | | | | Resource | | (F) |<---(E)------- Script ---------<| | | | +---------------+ +-|--------+ | | (A) (G) Access Token | | ^ v +---------+ | | | Client | | | +---------+

UPDATE: This doesn't work either

// Code goes here

function show(){
  var diagram = '  +----------+\n\
     | Resource |\n\
     |  Owner   |\n\
     |          |\n\
     +----------+\n\
          ^\n\
          |\n\
         (B)\n\
     +----|-----+          Client Identifier     +---------------+\n\
     |         -+----(A)-- & Redirection URI --->|               |\n\
     |  User-   |                                | Authorization |\n\
     |  Agent  -|----(B)-- User authenticates -->|     Server    |\n\
     |          |                                |               |\n\
     |          |<---(C)--- Redirection URI ----<|               |\n\
     |          |          with Access Token     +---------------+\n\
     |          |            in Fragment\n\
     |          |                                +---------------+\n\
     |          |----(D)--- Redirection URI ---->|   Web-Hosted  |\n\
     |          |          without Fragment      |     Client    |\n\
     |          |                                |    Resource   |\n\
     |     (F)  |<---(E)------- Script ---------<|               |\n\
     |          |                                +---------------+\n\
     +-|--------+\n\
       |    |\n\
      (A)  (G) Access Token\n\
       |    |\n\
       ^    v\n\
     +---------+\n\
     |         |\n\
     |  Client |\n\
     |         |\n\
     +---------+\n\
'
  x =  JSON.stringify(diagram)
  document.write("<p>"+ JSON.parse(x) +"</p>");
}

Answer 1

The line breaks in your source code listing are not part of the string itself. You need to add line break characters ( \\n ) if you want them to be part of the string.

If you then convert the string to JSON and convert the JSON back to a string, you may or may not encounter other issues. But the above is the first issue you'll need to address.

One trick I've seen to get around multiline weirdness is to not have a multiline string at all but to instead have an array of strings where each string represents one line in the multiline string.

Answer 2

white-space: pre fixes the issue

.pre {
    white-space: pre;
}

The new lines should also have break characters ( \\n ) so half of credit should go to Trott