From Code to Diagram

When working on complex systems, it's often useful to visualize the architecture and relationships between different components. Copilot can help you generate diagrams based on your code. Let's take the previous example of the library system:

class Book:
    def __init__(self, title, author):
        self.title = title
        self.author = author
        self.is_borrowed = False

class Patron:
    def __init__(self, name):
        self.name = name
        self.books = []

    def borrow(self, book):
        if not book.is_borrowed:
            self.books.append(book)
            book.is_borrowed = True
            return f"{book.title} has been borrowed."
        return "Book is currently unavailable."

class Library:
    def __init__(self):
        self.inventory = []

    def add_book(self, title, author):
        self.inventory.append(Book(title, author))

    def get_book_info(self, title):
        for book in self.inventory:
            if book.title == title:
                return f"{title} by {book.author}, {'Available' if not book.is_borrowed else 'Borrowed'}"
        return "Book not found."


# Usage
lib = Library()
lib.add_book("Animal Farm", "George Orwell")
lib.add_book("Brave New World", "Aldous Huxley")

patron = Patron("Alice")
print(patron.borrow(lib.inventory[0]))  # Attempt to borrow Animal Farm
print(lib.get_book_info("Animal Farm"))

You can use the following prompt to generate a class diagram based on the code snippet:

# Generate a PlantUML class diagram based on the code above
#
# @startuml <-- [Guide Copilot to generate a PlantUML diagram]
# <-- [New line and wait for the suggestion]

This is an example of a PlantUML class diagram that Copilot might suggest:

# Generate a PlantUML class diagram based on the code above
#
# @startuml
# class Book {
#     + title: str
#     + author: str
#     + is_borrowed: bool
# }
#
# class Patron {
#     + name: str
#     + books: list
#     + borrow(book: Book): str
# }
#
# class Library {
#     + inventory: list
#     + add_book(title: str, author: str)
#     + get_book_info(title: str): str
# }
#
# Book "1" -- "many" Patron
# Patron "1" -- "many" Book
# Library "1" -- "many" Book
# @enduml

You can now copy the output (without the # at the beginning of each line) and paste it into a PlantUML editor to visualize the classes and their relationships. You have multiple options here, like installing a PlantUML extension in VS Code, using the CLI to generate the diagram, or using the online visualizer. The latter is the easiest way to visualize the diagram quickly.

PlantUML class diagram

PlantUML was used in this example, but you can use other common description languages like Mermaid. The only thing you need to do is to provide the right prompt to Copilot and, in some cases, guide it.

# Generate a Mermaid class diagram based on the code above
#
# classDiagram <-- [Guide Copilot to generate a Mermaid diagram]
# <-- [New line and wait for the suggestion]

You can test the output by pasting the generated code into a Mermaid editor.

Let's see another example where we will generate a Mermaid sequence diagram for the following code to understand how a user login and email confirmation system works.

class User:
    def __init__(self, username, password, email):
        self.username = username
        self.password =

Building with GitHub Copilot

From Autocomplete to Autonomous Agents

Enroll now to unlock all content and receive all future updates for free.

Unlock now ($31.99) Learn More

Previous Next