Show HN: Cascii – 用原生 JavaScript 构建的可移植 ASCII 图表工具

Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript

Source | HN Comments

Cascii 是一个基于原生 JavaScript 构建的、可移植的 ASCII 和 Unicode 图表工具。它无需服务器、打包工具或库，只需在浏览器中打开 `cascii.html` 文件即可使用。Cascii 提供了基本绘图、选择、连接、分组、排序、复制、表格、自由绘制、图层、历史记录等功能，支持 ASCII 和 Unicode。用户可以通过快捷键操作，并可在 [cascii.app](https://github.com/casparwylie/) 上获取短链接和保存图表。该项目开源，欢迎贡献。

Cascii v1.0.0 (beta)

Cascii 是一个基于 web 的 ASCII 和 Unicode 图表构建器，使用原生 JavaScript 编写。 它不依赖任何服务器、web 打包工具、库，无需任何 markup 和样式表。你只需在浏览器中打开 cascii.html 文件即可开始构建图表。Cascii 也可以在 cascii.app 上使用，你可以在那里获得图表的短链接，开设账户等等。

示例

这里有一个使用 Cascii 构建的图表，它大致解释了 Cascii 的内部结构：

                  ┌╶╶╶╶╶╶╶╶╶╶╶╶╶╶┐
                  ╷ GroupManager ╷
                  └╶╶╶╶╶╶╶╶╶╶╶╶╶╶┘
        ┌─────────────┐  /         ┌─────────────┐
        │EventManager │  /      ┌───────│SquareLayer │
        └─────────────┘ /      │    │─────────────│    ┌───────────────┐
           \    /       │───────│CircleLayer │  ┌────│SwitchLineLayer│
            \   /       │    │─────────────│  │  │───────────────│
            ┏━━━━━━━━━━━━┓    │───────│BaseLineLayer│◀──┐────│FreeLineLayer │
            ┃LayerManager┃◀──────┘    │─────────────│  │  │───────────────│
            ┗━━━━━━━━━━━━┛    │───────│DiamondLayer │  └────│StepLineLayer │
    ┌────────────┐ /   /    \   │    │─────────────│    └───────────────┘
    │CharManager │/   /     \   │───────│FreeLayer  │
    └────────────┘   /      \  │    │─────────────│
              /       \  └───────│TableLayer  │
           ┌────────────┐    \     └─────────────┘      Pixels!
           │ ModeMaster │    •
           └────────────┘   •  •                   ▲
                    •    •                  │
                   •      •                 │
                  •  CanvasCom  ────────────────────────────────┘
                   •      •
                    •    •
                     •  •
                      •
Edit/view: https://cascii.app/7c24a

安装

只需下载并打开 cascii.html 文件！

…真的只需要这样…

curl https://cascii.app -o cascii.html && open cascii.html

…或者…

如果你不做任何更改，建议直接使用 cascii.app，这样可以利用短链接并保存你的工作。在本地使用时，短链接不会出现在你的导出中。

功能

基本绘图
选择（区域选择、多选、调整大小、移动）
连接点
分组
排序
复制
动态表格
自由绘制 / 擦除
自动保存（浏览器本地存储）
粘贴 / 导入文本
图层：Free, Switch Lines, Steps Lines, Free Lines, Square, Circle, Diamond, Text, Table
历史记录（撤销/重做）
线条样式
ASCII 和 Unicode

快捷键

ctrl-g 分组
ctrl-c 复制图层
ctrl-z 撤销
ctrl-shift-z 重做
ctrl-a 全选
backspace/delete 删除图层
shift-click 多选 | 单选组成员
arrow keys 移动图层
ctrl-v 粘贴文本 (在编辑文本时)，或者在任何其他模式下粘贴为图层

贡献

非常欢迎贡献。请随时以 PR 或 Issue 的形式直接提交建议。

许可

在 Apache License, Version 2.0 许可下。

关于

一个基于 web 的 ASCII 和 Unicode 图表构建器，使用原生 JavaScript 编写。 cascii.app