OAuth 2.0 / OpenID Connect flow diagrams. Build it by http://www.plantuml.com/plantuml/uml/

1. basic flow with auth code and access token

@startuml
skinparam handwritten true
"You/Browser" -> slack.com: 1. I would like to access my files on Google Drive via your interface.
slack.com -> "You/Browser": 2. You should apply the "Authorization Code" from Google for me first.
"You/Browser" -> account.google.com: 3. I would like to permit slack.com to access my files.
account.google.com -> "You/Browser": 4. Are you sure?
"You/Browser" -> account.google.com: 5. [Y]
account.google.com -> "You/Browser": 6. Okay. Here is the "Authorization Code." Plz give it back to slack.com now.
"You/Browser" -> slack.com: 7. You can do what I asked now (with the Authorization Code which is just received from Google.) 
slack.com -> account.google.com: 8. I would like to exchange the "Authorization Code" for the "Access Token."
account.google.com -> slack.com: 9. Your Access Token here. 
slack.com -> drive.google.com: 10. I would like to read files which belong to one of my customers. Here is the Access Token.
drive.google.com -> slack.com: 11. Hmmm...the Access Token is vaild. Here is list of files you asked.
slack.com -> "You/Browser": 12. Grant succeed. You can see your files stored in Google Drive from my interface now!
@enduml

2. introduce roles

@startuml
skinparam handwritten true
"ResourceOwner/User-Agent" -> Client: 1. I would like to access my resources on Resource Server via your interface.
Client -> "ResourceOwner/User-Agent": 2. You should apply the "Authorization Code" from Authorization Server for me first.
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. I would like to permit the Client to access my resources.
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Are you sure?
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y]
AuthorizationServer -> "ResourceOwner/User-Agent": 6. Okay. Here is the "Authorization Code." Plz give it back to Client now.
"ResourceOwner/User-Agent" -> Client: 7. You can do what I asked now. (With the Authorization Code which is just received from the Authorization Server) 
Client -> AuthorizationServer: 8. I would like to exchange the "Authorization Code" for the "Access Token."
AuthorizationServer -> Client: 9. Your Access Token here. 
Client -> ResourceServer: 10. I would like to access resources which belong to the Resource Owner. Here is the Access Token.
ResourceServer -> Client: 11. Hmmm...the Access Token is vaild. Here are resources you asked.
Client -> "ResourceOwner/User-Agent": 12. Grant succeed. You can access your resources located in Resource Server from me now!
@enduml

3. introduce protocol messages

@startuml
skinparam handwritten true
"ResourceOwner/User-Agent" -> Client: 1. (Start the procedure by calling the client specific request.)
Client -> "ResourceOwner/User-Agent": 2. HTTP 302: Redirect to the "Authorization Code Request" URL with parameters:\n scope=[specific_scope]&redirect_uri=[client_callback]&client_id=[client_id]&response_type=code&state=foobar
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. Call "Authorization Request" URL with parameters listed above.
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Whould you like to permit [specific_scope] for [client]?
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y]
AuthorizationServer -> "ResourceOwner/User-Agent": 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar
"ResourceOwner/User-Agent" -> Client: 7. Call [client_callback] URL with parameters listed above.
Client -> AuthorizationServer: 8. Call "Access Token Request" URL with parameters:\n code=[authorization_code]&client_id=[client_id]&client_secret=[client_secret]&grant_type=authorization_code
AuthorizationServer -> Client: 9. HTTP 200 with the [access_token]
Client -> ResourceServer: 10. Call rsource specific API with the header: {Authorization: Bearer [access_token]}
ResourceServer -> Client: 11. HTTP 200 with protected resources
Client -> "ResourceOwner/User-Agent": 12. (Show grant succeed and protected resources.)
@enduml

4. introduce openid connect

@startuml
skinparam handwritten true
"ResourceOwner/User-Agent" -> Client: 1. (Start the procedure by calling the client specific request.)
Client -> "ResourceOwner/User-Agent": 2. HTTP 302: Redirect to the "Authorization Code Request" URL with parameters:\n scope="profile <color:red>openid</color>"&redirect_uri=[client_callback]&client_id=[client_id]&response_type=code&state=foobar
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. Call "Authorization Request" URL with parameters listed above.
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Whould you like to permit "<color:red>openid</color>, profile" for [client]?
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y]
AuthorizationServer -> "ResourceOwner/User-Agent": 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar
"ResourceOwner/User-Agent" -> Client: 7. Call [client_callback] URL with parameters listed above.
Client -> AuthorizationServer: 8. Call <color:red>"Access Token / ID Token Request"</color> URL with parameters:\n code=[authorization_code]&client_id=[client_id]&client_secret=[client_secret]&grant_type=authorization_code
AuthorizationServer -> Client: 9. HTTP 200 with the [access_token, <color:red>id_token</color>]
Client -> ResourceServer: <color:red>10. Call userInfo endpoint with the header: {Authorization: Bearer [access_token]}
ResourceServer -> Client: <color:red>11. HTTP 200 with more detailed user information.
Client -> "ResourceOwner/User-Agent": <color:red>12. (Login succeed.)
@enduml

here my version, which is a little more compact (and has a more neutral corporate style)
https://gist.github.com/adaptive-shield-matrix/1ffd07f3dfa446b8d4a09bd991766126