preface

  • Recently, I took charge of some special projects for infrastructure construction and standardization. At the peak, the week produced 30; I changed from coder to writer. Document landing is important, just as important as the comments in the code, to sum up a word, a picture is worth a thousand words, less writing and more drawing
  • Today’s main introduction is not how to write a document, but just to share how to better express with diagrams. Structured expression is very important. I compare the expression of diagrams with Design patterns in codes. It can also be a different representation of a graph.

A picture is worth thousands of words, don’t bb directly above, today share some of their own code word drawing harvest, which mainly use processOn and Xmind, language sparrow and other tools; This paper mainly introduces the practice of mind mapping (tree diagram), fishbone diagram, swimming lane diagram and UML.


Best Practices (rocket building projects 🚀)

SpaceX’s Falcon 9 rocket lifted off from the Kennedy Space Center in Florida at 8:02 am Beijing time (2021.9.16). Let’s take a quick look at how the process of building a rocket can be graphically represented.

So what is the role of a software engineer in a rocket 🚀 project? What is the macro perspective? How to collaborate among departments, from macro to spectator perspective?

Organizational Structuretree

Musk, the CEO, has to sort out the organizational structure

  • Text version: We have CEO&CTO(Elon Musk), Director (Antonio Gracias), Director (Don Harrison), CFO under CEO…

  • Graph (parent-child relationship, structure, upper and lower management can be used tree graph) — Language finch mind map:

The rocket project was invertedFishbone diagram

Requirement: the R&D department needs to build the rocket (really), the overall project schedule needs to be reversed, and the project PM starts to work

  • Text: Project launch, rocket building, rocket deployment, rocket launch, project closure, specific rhythm Balabala…
  • Picture: fishbone diagram


Research and development processA swimlane

Requirements: Now the inversion of the project begins, your department has received the demand to develop the rocket system management center, James, the software engineer is in one part, how can we reasonably sort out and cooperate with each department

  • Text: Requirement stage, design stage, development stage, joint commissioning/testing stage, pre-release/online release, and product, design, test, front and back end with……

  • Figure :(swimlane map, teamwork, event push available) — ProcessOn swimlane map

A swimlane diagram, a UML activity diagram, can clearly show which department an action takes place in


One small requirement: user information queryUML

Requirements: Front-end Brendan is assigned a user permissions query requirement, different page permissions are different, want to know how the front and back end services work together process?

  • Text: The user enters the login page, enters the password, queries information in the service center, asks whether the user has the permission, returns the corresponding permission information, and returns to the user page, indicating that the login is successful.
  • Diagram (page logic details, showing the conduction between different things, withUML)ProcessOn UML:


When will it be used?

icon When to use it practice
tree Organizational structure, classification Department organization structure, project organization structure, product analysisSpaceX Organization
Fishbone diagram Time series, threading Project inversion, activity scheduleBuilding rockets 🚀 time reversal
A swimlane Process promotion, department coordination The R&D department collaborates and the R&D process is carried outR&d Department Collaboration
UML Software structure design, product design Requirement analysis, software process designPermission Login Design

reference

  • SpaceX: Structure organization information
  • Rocket info: spaceX Wiki
  • [we_are_spacex_software_engineers_we_launch/]
  • Drawing tool: Processon
  • Drawing tool: Xmind